深入浅出剖析Vue源码之computed与watch的秘密

引言

大家好，我是林三心。在当今前端开发领域，理解源码变得越来越重要。源码的理解可以帮助我们更快地捕捉到问题所在，提高开发效率。今天，我们一起来学习computed和watch的原理。

computed

computed是一个计算属性，它依赖于其他属性的值进行计算。当这些属性的值发生改变时，computed属性的值也会随之更新。computed属性的语法如下：

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

在这个例子中，fullName是一个计算属性，它依赖于firstName和lastName属性的值进行计算。当firstName或lastName的值发生改变时，fullName的值也会随之更新。

computed属性的计算是惰性的，这意味着只有当它被访问时才会进行计算。这可以提高性能，因为只有在需要的时候才会进行计算。

watch

watch是一个侦听器，它可以监视一个或多个属性的值的变化。当被监视的属性的值发生改变时，watch会触发一个函数。watch的语法如下：

watch: {
  firstName(newValue, oldValue) {
    console.log('firstName has changed from', oldValue, 'to', newValue);
  }
}

在这个例子中，firstName属性被一个watch侦听。当firstName的值发生改变时，watch会触发一个函数，该函数会打印出firstName的值的变化。

watch可以监视一个或多个属性的值的变化。如果要监视多个属性的值的变化，可以使用数组语法：

watch: {
  ['firstName', 'lastName'](newValue, oldValue) {
    console.log('firstName or lastName has changed');
  }
}

computed和watch的区别

computed和watch都是用来响应数据变化的，但它们之间还是有一些区别的。

• computed是一个计算属性，它依赖于其他属性的值进行计算。watch是一个侦听器，它可以监视一个或多个属性的值的变化。
• computed的计算是惰性的，这意味着只有当它被访问时才会进行计算。watch的计算是立即的，这意味着它会在属性的值发生改变时立即触发。
• computed不能被直接修改，只能通过修改其依赖的属性的值来修改。watch可以被直接修改，可以使用this.$watch()方法来修改。

结语

以上就是computed和watch的原理。希望通过这篇文章，你能更深入地理解Vue的响应式系统和数据绑定机制。如果你想了解更多关于Vue源码的知识，可以参考官方文档或一些优秀的Vue源码分析文章。