Vue 计算属性和侦听器：细致分析与用例

2023-11-04 09:23:21

Vue.js 中的响应式系统

在介绍 computed 和 watch 之前，我们先来了解一下 Vue.js 中的响应式系统。Vue.js 的响应式系统是一个核心的特性，它允许我们创建能够对数据变化做出反应的应用程序。当数据的某个属性发生变化时，响应式系统会自动更新相关联的 DOM 元素。

computed 属性

computed 属性是一个计算属性，它允许我们在组件中定义一个新的属性，该属性的值是基于其他属性计算而来的。computed 属性的语法如下：

computed: {
  fullName: function() {
    return this.firstName + ' ' + this.lastName;
  }
}

在上面的例子中，我们定义了一个名为 fullName 的 computed 属性，它的值是 firstName 和 lastName 属性的组合。当 firstName 或 lastName 属性发生变化时，fullName 属性的值也会自动更新。

watch 属性是一个侦听器，它允许我们在组件中监听某个属性的变化。当该属性发生变化时，watch 属性会触发一个回调函数。watch 属性的语法如下：

watch: {
  firstName: function(newVal, oldVal) {
    console.log('firstName changed from ' + oldVal + ' to ' + newVal);
  }
}

在上面的例子中，我们定义了一个名为 firstName 的 watch 属性，它会监听 firstName 属性的变化。当 firstName 属性发生变化时，console.log 语句就会被执行，并且会输出 firstName 属性的变化情况。

computed 和 watch 是 Vue.js 中两种重要的特性，它们都与响应式系统有关，但它们之间也有着一些区别。

计算属性 是基于其他属性计算而来的，它本身并不存储任何数据。而 侦听器 则会监听某个属性的变化，当该属性发生变化时，侦听器会触发一个回调函数。
计算属性 的返回值是固定的，它不会随着时间的推移而改变。而 侦听器 的回调函数是可以随着时间的推移而改变的，因为它们可以访问组件的状态。
计算属性 通常用于在组件中定义一些新的属性，这些属性的值是基于其他属性计算而来的。而 侦听器 通常用于在组件中监听某个属性的变化，并根据变化的情况执行相应的操作。

在使用 computed 和 watch 属性时，有一些最佳实践可以遵循：

避免在 computed 属性中执行耗时的操作 ，因为这可能会导致性能问题。如果需要在 computed 属性中执行耗时的操作，可以考虑使用 async 和 await 来优化性能。
避免在 watch 属性的回调函数中修改组件的状态 ，因为这可能会导致死循环。如果需要在 watch 属性的回调函数中修改组件的状态，可以考虑使用 Vue.nextTick() 来延迟执行修改操作。
尽量减少 computed 属性和 watch 属性的数量 ，因为它们会增加组件的复杂性。如果一个组件有太多的 computed 属性和 watch 属性，那么它的维护和调试难度会大大增加。