庖丁解牛 Vue 源码（十）—— 计算属性与侦听属性的异同

2023-10-30 02:35:01

在 Vue.js 中，计算属性和侦听属性都是非常有用的工具，可以帮助我们更方便地管理和响应数据变化。虽然它们都有助于响应数据的变化，但它们之间还是存在一些差异的，在什么时候使用它们取决于您的具体需求。

计算属性是一种声明式的方式来定义一个属性，它的值是基于其他属性的值计算出来的。换句话说，计算属性的本质是“纯函数”，也就是它的值只取决于它的依赖项，而不会产生任何副作用。

举个例子，假设我们有一个名为 name 的数据属性，我们想创建一个计算属性 fullName，它将 name 和 lastName 组合成一个完整的姓名。我们可以在组件中使用 computed 选项来定义这个计算属性：

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

然后，我们就可以在模板中使用 fullName 计算属性，就像它是一个普通的数据属性一样：

<p>Full Name: {{ fullName }}</p>

侦听属性则是一种观察者模式，它允许我们在数据属性发生变化时执行某些操作。与计算属性不同的是，侦听属性是“副作用”函数，当它监视的数据属性发生变化时，它将执行回调函数。

举个例子，假设我们有一个名为 count 的数据属性，我们想创建一个侦听属性，每当 count 发生变化时，它都会将最新的值记录到控制台中。我们可以在组件中使用 watch 选项来定义这个侦听属性：

watch: {
  count: function(newValue, oldValue) {
    console.log(`Count changed from ${oldValue} to ${newValue}`);
  }
}

然后，每当 count 的值发生变化时，控制台都会打印出一条消息，记录下新旧值。

计算属性和侦听属性虽然都与数据变化相关，但它们有不同的使用场景。

一般来说，我们使用计算属性来计算一个属性的值，而该值依赖于其他属性的值。计算属性的计算是“惰性的”，这意味着只有在使用该属性时才会执行计算。

另一方面，侦听属性用于在数据属性发生变化时执行某些操作。侦听属性的回调函数是“主动的”，这意味着它们将在数据属性发生变化时立即执行。

下面是一些具体的例子，说明了何时使用计算属性和侦听属性：

使用计算属性：
- 计算一个属性的值，该值依赖于其他属性的值，并且该值不会随着时间的推移而改变。
- 计算一个属性的值，该值依赖于其他属性的值，并且该值需要在模板中使用。
- 计算一个属性的值，该值依赖于其他属性的值，并且该值需要在组件的生命周期钩子中使用。
使用侦听属性：
- 在数据属性发生变化时执行某些操作。
- 在数据属性发生变化时更新其他数据属性。
- 在数据属性发生变化时触发网络请求。