避免不必要的重新渲染
你知道不，每次刷新组件都会费劲儿点儿，所以有个小办法教给你，就是用那个叫v-once的指令。就是说，给需要这么做的组件挂上它，然后确保组件里的数据不能变，不管怎样，Vue就只会渲染这一回。这就让Vue省了不少功夫，不用每次都来来回回的对比，这样大家的软件运行起来就能快点了。
好，给你打个比方，比如我们这里有个组件是做摆设用的，不被用户操作影响，就要用到这个神奇的v-once。就是说，即使你把父组件的数据改了，这个组件都懒得理你。特别适合用来放那些始终如一的信息。这样一弄，性能可提高不少！
记住碰到刷新的小破事可别轻易上手v-once，小心耽误了组件更新的步伐。那v-once到底什么时候能用？当然得看你具体需求，用量好才能有好效果。
{{ data }}
合理使用computed属性
除了v-once，你还能用计算属性轻松在Vue组件间传消息！这玩意就像个记事本，只算一次数据并悄悄藏起来。所以说这功能还是很贴心的！
界面要显示什么和响应式数据有没有关系？宝宝们，直接把相关代码丢进 computed 属性里解决问题就好了！这样既能省去不少没必要的运算量，还提高了效率哟~
比如说，要是咱想让人家看看按特定条件找出来的货物清单，那就用不着老费劲地更新这个玩意儿了。这种情况下我们只需把筛选条件跟货物列表里那个“你该看到我”、“我该看到你”这对儿锁定起来丢给computed这小伙子就好了。这样，其他人只要扫一眼筛选条件，咱们哥几个就乐得只更新关联的那些数据就得了，货物清单也不需要每次都重新算过了。
{{ computedData }}export default { data() { return { dataSource: [1, 2, 3, 4, 5] }; }, computed: { computedData() { // 假设这里是一个复杂的计算过程 return this.dataSource.map(item => item * 2); } } };
双向绑定数据
哈喽！我和我儿子交流时，我会用 props 工具发送消息。为了方便快捷传递信息，我会加上”sync”魔法技能，这样你就能顺利接收！
加上”+”号，小部件就能轻松刷新大部件的信息，这样做方便极了，真酷！
告诉你个喜讯，如果你需要在表格中填些数据，还有你希望父模块也能看到最新的数据，其实只要小小使用下.sync功能就OK！不必为怎么让数据自动更新的问题烦恼了，这招超级方便、节省时间还可提高效率！
// 父组件
export default {
data() {
return {
data: 1
};
}
};
// 子组件
export default {
props: {
value: {
type: Number,
default: 0
}
}
};
使用事件总线进行通讯
咱要明白，Vue app可不只有父子聊天那么简单，还得操心其他种类的对话。嫌麻烦？代码看着眼花？那就学学怎么用事件总线，这可是个高效便捷的招式！
事件总线就像咱们家里的大管家一样，帮忙传递信息给每个vue组件。你用$emit放信号，我再用$on接收，真是方便多了，代码也更加整洁明了，工作起来轻松自在，效率那不是一般的高！
比如，假如某些网站要互相分享信息，就像我们玩游戏聊天那样，那么这个“事件总线”就是很有用的~哪怕你改变网站布局和结构，它都没问题！不仅简单方便，而且也有助于代码维护。真的是超级给力！
// event-bus.js
import Vue from "vue";
export default new Vue();
// 组件A
import EventBus from "./event-bus";
...
EventBus.$emit("event-name", data);
// 组件B
import EventBus from "./event-bus";
...
EventBus.$on("event-name", data => {
// 处理数据
});
批量传递数据
啥情况下得把好多信息或者大数据传到子组件里？那就是用v-on 的批量传了！这么干能少更新几次，运行速度也快点。
处理好多属性啥的，用上v-on就省心多了，大大减少了麻烦。特别是要经常更新展示或大数据交换时，这个功能就是我们的福音！
就比如说，想要在表格里放很多东西，v-on就能省时又省力地搞定这些数据传输，页面速度也会飞快。
说实话，搞定Vue开发最关键的就是明白组件通信那回事儿。明白了v-once指令、计算属性、Props双向绑定这些技能，你的应用速度就能飞起来，用户体验也嗨翻天！做项目时，看哪些方法最好用，就多用点；但也别忘了跟上前沿的技术步伐别让新东西把你远远落下。
// 父组件
export default {
data() {
return {
data1: 1,
data2: 2,
// ...
};
},
computed: {
propsData() {
return {
data1: this.data1,
data2: this.data2,
// ...
};
}
}
};
// 子组件
{{ data1 }}
{{ data2 }}
export default {
props: {
data1: {
type: Number,
default: 0
},
data2: {
type: Number,
default: 0
},
// ...
}
};
。
评论0