详细聊聊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：观察属性的目的是让开发者能够在指定的数据变化时执行一些副作用逻辑或异步操作。通过观察属性，开发者可以指定要观察的数据属性，并在数据变化时执行相应的回调函数。这使得开发者能够对数据变化做出特定响应，比如发送网络请求、更新其他数据、触发动画等。观察属性提供了一种更灵活的方式来处理数据变化，使得开发者可以根据具体需求执行自定义操作。

四、适用场景

computed：适用于对数据进行处理和派生出新数据的场景。

watch：适用于需要对数据变化做出特定响应的场景。

五、缓存机制

computed：计算属性具有默认的缓存机制。当依赖的数据发生变化时，计算属性会重新计算并返回结果，在后续的访问中，如果计算属性依赖的数据没有发生变化，Vue会直接返回缓存的结果，而不会重新计算。这样可以避免不必要的重复计算，提高性能。如果想要禁用计算属性默认的缓存机制，可以使用 cache 属性设置：

computed: {
    fullName: {
        get() {
            return this.firstName + ' ' + this.lastName;
        },
        cache: false  // 禁用
    }
}

watch：观察属性默认情况是没有缓存机制的。每当观察的数据发生变化时，Vue都会立即执行相应的回调函数，而不考虑之前的回调结果。其中有一些属性可以进行设置：

watch: {
    firstName: {
        handler(newVal, oldVal) {  // 回调操作
            ...
        },
        immediate: true,  // 启用观察属性的初始回调，在初始化时也会执行一次回调函数
        deep: true  // 深度观察嵌套对象的变化
    }
}