在 Vue 中使用 computed 和 watch 时，性能问题探讨
本文涉及的产品
轻量应用服务器 2vCPU 4GiB，适用于网站搭建
轻量应用服务器 2vCPU 4GiB，适用于搭建容器环境
轻量应用服务器 2vCPU 1GiB，适用于搭建电商独立站
简介：
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题，并提供了优化建议，帮助开发者提高应用性能。
- 对于computed计算属性
- 合理利用缓存机制
- 避免复杂计算逻辑的重复执行
- 原理：如果计算属性的计算逻辑很复杂，如涉及大量循环、复杂的数学运算等，要确保这些计算不会在不必要的时候被触发。避免在模板中使用会导致计算属性频繁重新计算的表达式，例如在
v - if或v - for指令中使用复杂的计算属性表达式。
- 示例：假设我们有一个计算属性用于计算一个大型数组中满足特定条件的元素数量，并且在模板中有多个地方使用了这个计算属性。
export default {
data() {
return {
largeArray: [1, 2, 3, 4, 5,..., 1000]
};
},
computed: {
countGreaterThanFive() {
return this.largeArray.filter(num => num > 5).length;
}
}
}
如果在模板中这样使用： <template>
<div v - if="countGreaterThanFive > 10">
</div>
<div v - for="i in countGreaterThanFive">
</div>
</template>
每次渲染这两个元素时，countGreaterThanFive都会被重新计算。更好的做法是先将计算属性的值赋给一个变量，然后在模板中使用这个变量，如下： <template>
<div v - if="count > 10">
</div>
<div v - for="i in count">
</div>
</template>
export default {
data() {
return {
largeArray: [1, 2, 3, 4, 5,..., 1000]
};
},
computed: {
countGreaterThanFive() {
return this.largeArray.filter(num => num > 5).length;
}
},
mounted() {
this.count = this.countGreaterThanFive;
}
}
- 对于watch侦听器
- 避免过度监听数据变化
- 原理：
watch在每次被观察的数据发生变化时都会执行回调函数。如果在一个组件中过度使用watch来监听数据，尤其是那些频繁变化的数据，会导致性能下降。因此，只监听真正需要响应变化的关键数据。
- 示例：假设我们有一个表单组件，有多个输入框，但只有当用户提交表单时，我们才关心所有输入框的数据是否完整。如果在
watch中监听每个输入框的数据变化来进行验证，会造成不必要的性能开销。更好的做法是在提交表单时统一进行验证，而不是通过watch来监听每个输入框的数据变化。
- 谨慎使用深度监听（
deep: true）
- 原理：当对一个对象或数组使用
watch并设置deep: true时，Vue会递归地监听对象或数组的每一个属性变化。这在处理复杂数据结构时可能会导致性能问题，因为每次属性的微小变化都会触发回调函数。只有在确实需要对数据结构的所有层次的变化做出响应时才使用深度监听。
- 示例：假设我们有一个复杂的嵌套对象，用于存储用户配置信息。
export default {
data() {
return {
userConfig: {
profile: {
name: 'John',
age: 30
},
preferences: {
theme: 'dark',
language: 'en'
}
}
};
},
watch: {
userConfig: {
handler(newValue, oldValue) {
},
deep: true
}
}
}
在这个例子中，只要userConfig对象中的任何一个属性（如userConfig.profile.name、userConfig.preferences.theme等）发生变化，回调函数就会被触发。如果不需要对所有层次的变化都做出响应，可以考虑将对象拆分成更小的部分进行监听，或者使用计算属性来处理部分数据的变化。
