Vue里的computed和watch的用法与区别

Vue里的computed和watch

computed属性

computed属性是计算属性，它依赖于其他属性，当依赖的属性发生变化时，computed属性也会自动更新。computed属性的语法如下：

computed: {
  computedProperty: {
    get: function () {
      // 计算属性的计算逻辑
    },
    set: function (newValue) {
      // computed属性的设置逻辑
    }
  }
}

watch选项

watch选项则是一个侦听器，它可以监听任意属性的变化，当被监听的属性发生变化时，watch选项就会触发。watch选项的语法如下：

watch: {
  watchProperty: {
    handler: function (newValue, oldValue) {
      // 侦听属性发生变化时的处理逻辑
    },
    immediate: true // 是否立即执行侦听器
  }
}

两者的区别

1. 计算属性和侦听器都用于响应数据变更，但是两者有不同的触发方式

computed属性是基于依赖关系的，当依赖的属性发生变化时，computed属性会自动更新。而watch选项则是基于观察的，它会监听任意属性的变化，当被监听的属性发生变化时，watch选项就会触发。

2. 计算属性的计算结果是缓存的，而侦听器则不是

computed属性的计算结果是缓存的，这意味着它只会计算一次，除非依赖的属性发生变化。而watch选项则不是缓存的，它会每次都重新计算。

3. computed属性不能监听数组和对象的变化，而watch选项可以

computed属性只能监听基本数据类型的变化，而不能监听数组和对象的变化。watch选项则可以监听任何类型的数据变化，包括数组和对象。

何时使用computed属性

1. 当需要计算属性时

例如，当您需要将两个属性相加，或者当您需要根据某个属性的值来计算另一个属性的值时，您可以使用computed属性。

2. 当需要缓存计算结果时

如果您需要缓存计算结果，以便在计算结果发生变化时不必重新计算，您可以使用computed属性。

何时使用watch选项

1. 当需要监听数组和对象的变化时

如果您需要监听数组和对象的变化，您可以使用watch选项。

2. 当需要在属性发生变化时执行一些操作时

如果您需要在属性发生变化时执行一些操作，您可以使用watch选项。

总结

computed属性和watch选项都是用于响应数据变更的工具，但是两者有细微的区别。computed属性是计算属性，它依赖于其他属性，当依赖的属性发生变化时，computed属性也会自动更新。watch选项则是一个侦听器，它可以监听任意属性的变化，当被监听的属性发生变化时，watch选项就会触发。