详细聊聊Vue中设计的computed和watch

一、定义

它们都提供了一种在响应式数据变化时执行响应操作的机制。

computed：计算属性，是基于其他数据进行计算得到的，依赖于其他数据，只有当依赖的数据发生变化时，计算属性才会自动更新，并当作普通属性进行访问。

computed: {
    // 当firstName或lastName发生变化时fullName才会被重新计算
    fullName() {
        return this.firstName + ' ' + this.lastName;
    }
}

watch：观察属性，是用于监听指定的数据变化，在数据变化时执行相应的操作，不依赖于其他数据，专注于本身所监听的数据。

watch: {
    firstName(newVal, oldVal) {
        // 当firstName发生变化时执行的操作
        ...
    }
}

二、返回值

computed：返回一个新数据，当作普通属性进行使用。

watch：观察属性并不直接返回值，而是根据响应数据发生变化执行回调函数中的相应操作，达到实时响应的效果。

三、设计初衷

computed：计算属性的目的是让开发者能够根据已有的数据生成新的衍生数据。通过将计算逻辑封装在计算属性中，Vue能够自动追踪计算属性所依赖的数据，并在依赖数据发生变化时自动更新计算属性的值。这种自动追踪和更新的能力使开发者能够以一种声明式的方式定义数据的关系。

watch：观察属性的目的是让开发者能够在指定的数据变化时执