Vue 组件通讯性能优化技巧：提高效率的实用指南

Vue大项目里，组件通信挺关键的，对速度也有影响。别急，这篇告诉你几个好技巧，让你的Vue组件通信更给力！

使用props传递数据

咱们经常要用props给Vue组件传递信息。注意，定义组件时千万别把所有数据都塞进去，只需要那些真的需要的部分就够！举个栗子，假设咱们有个大的父组件叫App，还有个小的子组件叫Child。那传数据的时候，就只传你真正要用到的那几个属性就行了：

javascript
// 父组件 App

这样省了好多没必要的传送数据，速度飞快！每次更新时，只要上传跟重新画有关的那部分，别管整个对象了，方便还高效。

使用事件传递数据

Vue还自带了个叫’事件系统’的东东，可以让组件们互相聊天儿。比如说，我们有个爸爸组件App，还有俩儿子组件Child1和Child2。你要是在Child1上按个钮，那数据就会跑到Child2那儿去！

// Child1 组件

Send Data</button>

export default {

methods: {

sendData() {

把数据发过去，告诉Child1说“你好！”。

}

}

}

传递事件数据可以节省很多无用的数据传输，让软件操作起来更迅速。这个方法挺好使，特别是在咱们需要在N个组件间传递数据时，还能避免因为直接改动属性值带来的麻烦。

使用Vuex进行状态管理

  

    
  


import Child from './Child.vue';
export default {
  data() {
    return {
      name: 'John',
      age: 30,
    };
  },
  components: {
    Child,
  },
};

想要你的APP更好玩儿？想让功能更丰富且各部分间沟通更顺畅？用Vuex试试看！它就是帮你搞定这些问题的利器，可以让所有组件共享并获取数据。举个例子，假设你有个叫App的爸爸组件，还有两个孩子叫Child1和Child2。如果你在Child1里动了点儿数据，想马上在Child2里看到变化，那就用Vuex吧：

// Vuex store

就这么理解，Vuex存储就是个小小的仓库，我们给它起了个名字叫store。

state: {

message: ”

},

mutations: {

更新留言就这么回事儿，就像这样：修改后的状态要加上新消息。

state.message = newMessage;

actions: {

更新消息就是这么干的：把新信息加到你的提交里，再点击”提交”就行！

更新下消息，添加新消息。

});

用Vuex调好，组件之间沟通就顺畅多了，特别是大项目。它让咱们在管数据这事儿上更有序，还能让各个组件独立起来，让代码好收拾、好加东西。

使用provide和inject

  

    
    
  


import Child1 from './Child1.vue';
import Child2 from './Child2.vue';
export default {
  data() {
    return {
      data: '',
    };
  },
  components: {
    Child1,
    Child2,
  },
  methods: {
    handleButtonClick(data) {
      this.data = data;
    },
  },
};

你知道Vue有个特别厉害的东东吗？那就是提供和注入功能。它能让父级组件和子级组件共享数据，超级实用的，尤其对于组件深度嵌套的情况。就像这样：

// 祖先组件

provide: {

user: { name: ‘Alice’ }

在后代组件中，可以使用inject来接收这些数据：

// 后代组件

<div>{{ user.name }}</div>

inject: [‘user’]

用这个功能，不用一个个传属性，就能提升速度。

避免不必要的re-render

告诉你一件事，Vue里面组件重绘真的很拖慢效率的耶！怎么破这个事儿？试试搞个计算属性或来个v-once指令呗，这样就能省去很多数据的重绘。比如说：

<div v-once>{{ cachedMessage }}</div>

computed: {

cachedMessage() {

回复这条信息呗！

有些数据只需要算一遍。下次再渲染时，直接从缓存取数据，速度当然快！

使用v-bind的.sync修饰符

  

    
    
  


import Child1 from './Child1.vue';
import Child2 from './Child2.vue';
export default {
  components: {
    Child1,
    Child2,
  },
};

有时想让小部件帮老部件刷新状态，别急，Vue的v-bind加上它的.sync修饰符就能解决这问题。以下就是示例：

// 父组件

// main.js
import Vue from 'vue';
import Vuex from 'vuex';
import App from './App.vue';
Vue.use(Vuex);
const store = new Vuex.Store({
  state: {
    data: '',
  },
  mutations: {
    updateData(state, payload) {
      state.data = payload;
    },
  },
});
new Vue({
  store,
  render: h => h(App),
}).$mount('#app');

在子组件里面，只要稍微发个”更新”消息，父组件的状态就会同步改变！

// 子组件

使用`.sync`这个小东西，让父和子组件间的数据绑定就像喝水吃饭一样简单，代码也更清清楚楚。还可以提高性能！

使用key属性优化列表渲染

Update Data

  

    
{{ data }}
  


export default {
  computed: {
    data() {
      return this.$store.state.data;
    },
  },
};