Vue3说人话系列之Computed 与 watch，数据计算/监听
2023-12-28 16:06:32
前言
在 Vue3 中，computed 和 watch 是两个非常重要的响应式 API。它们可以帮助我们在组件中定义计算属性和监听器。计算属性是基于其他属性计算出来的值，而监听器则是在其他属性发生变化时触发回调函数。
computed
computed 是一个计算属性，它可以基于其他属性的值计算出一个新的值。计算属性是惰性的，这意味着只有在它被访问时才会计算它的值。计算属性的值会缓存起来，所以如果计算属性的值没有改变，那么它就不会重新计算。
export default {
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`
}
}
}
在上面的例子中，我们定义了一个名为 fullName 的计算属性。这个计算属性的值是 firstName 和 lastName 属性的值连接而成。当 firstName 或 lastName 的值发生变化时，fullName 的值也会随之更新。
watch
watch 是一个监听器，它可以在其他属性发生变化时触发回调函数。监听器是主动的，这意味着它会不断地监视其他属性的值，一旦这些属性的值发生变化，就会触发回调函数。
export default {
watch: {
firstName(newVal, oldVal) {
console.log(`firstName has changed from ${oldVal} to ${newVal}`)
}
}
}
在上面的例子中，我们定义了一个名为 firstName 的监听器。这个监听器会在 firstName 属性的值发生变化时触发回调函数。回调函数会输出 firstName 的新值和旧值。
computed 和 watch 的区别
computed 和 watch 都是响应式 API，但它们之间有一些区别。
- computed 是一个计算属性，它可以基于其他属性的值计算出一个新的值。watch 是一个监听器，它可以在其他属性发生变化时触发回调函数。
- computed 是惰性的，这意味着只有在它被访问时才会计算它的值。watch 是主动的，这意味着它会不断地监视其他属性的值，一旦这些属性的值发生变化，就会触发回调函数。
- computed 的值会缓存起来，所以如果计算属性的值没有改变，那么它就不会重新计算。watch 的回调函数每次都会被触发，无论属性的值是否发生变化。
什么时候使用 computed
我们可以使用 computed 来计算一些只依赖于其他属性的值。例如，我们可以使用 computed 来计算一个组件的总价，这个总价是基于组件中其他属性的值计算出来的。
什么时候使用 watch
我们可以使用 watch 来监听一些属性的变化。例如，我们可以使用 watch 来监听一个组件的可见性，当组件变得可见时，我们可以触发一个回调函数。
结论
computed 和 watch 都是 Vue3 中非常重要的响应式 API。它们可以帮助我们在组件中定义计算属性和监听器。我们可以根据自己的需求选择使用 computed 或 watch。
示例
以下是一个使用 computed 和 watch 的示例：
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe',
age: 30
}
},
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`
}
},
watch: {
firstName(newVal, oldVal) {
console.log(`firstName has changed from ${oldVal} to ${newVal}`)
}
}
}
在这个示例中，我们定义了一个名为 fullName 的计算属性，它会计算 firstName 和 lastName 的值。我们还定义了一个名为 firstName 的监听器，它会在 firstName 的值发生变化时触发回调函数。
当我们运行这个组件时，控制台会输出以下内容：
firstName has changed from undefined to John
这是因为当组件首次渲染时，firstName 的值是 undefined。当我们设置 firstName 的值为 "John" 时，firstName 的值就会发生变化，从而触发监听器回调函数。
