Vue深度剖析：computed和watch的精妙之处

前端

2024-01-21 15:54:44

一、computed与watch的奥妙

在Vue.js中，computed和watch都是与响应式数据绑定相关的特性，但它们在功能和用法上有所不同，分别适用于不同的场景。

1. computed：计算属性

computed计算属性类似于过滤器，它允许您对绑定到视图的数据进行处理和转换，并监听数据的变化，从而执行相应的方法。计算属性是基于它们的依赖进行缓存的，这意味着它们只在相关依赖发生改变时才会重新求值。

优点：

提高性能：由于计算属性是缓存的，因此只有在相关依赖发生改变时才会重新计算，可以提高性能。
简化代码：使用computed可以将复杂的计算逻辑封装成可重用的属性，使代码更加简洁易读。

用法：

computed: {
  reversedMessage: {
    // getter
    get: function () {
      return this.message.split('').reverse().join('');
    },
    // setter
    set: function (newValue) {
      this.message = newValue.split('').reverse().join('');
    }
  }
}

2. watch：侦听器

watch侦听器允许您监听特定数据的变化，并在数据发生改变时执行指定的函数。

优点：

灵活的响应：watch可以监听任何数据，包括对象、数组等，并且可以对数据变化做出不同的响应。
可控性强：watch提供了更多的控制选项，如deep和immediate，可以更好地控制监听数据的行为。

用法：

watch: {
  message: {
    handler: function (newValue, oldValue) {
      // 当message发生改变时执行此函数
      console.log(`新值：${newValue}，旧值：${oldValue}`);
    },
    deep: true,  // 深度监听，监听对象的子属性变化
    immediate: true  // 立即执行一次监听函数
  }
}