Vue.js中的computed和watch：理解计算属性和侦听属性

2023-11-11 07:01:41

computed：计算属性

computed 属性是 Vue.js 中的一种特殊属性，它允许您定义计算属性，这些属性依赖于其他属性并自动更新。这意味着，当依赖项属性发生变化时，computed 属性的值也会自动更新，而无需手动重新计算。

计算属性的语法如下：

computed: {
  computedPropertyName: {
    get() {
      // 计算属性的值
    },
    set(newValue) {
      // 当计算属性的值发生变化时执行此函数
    }
  }
}

计算属性的值可以通过 this.computedPropertyName 访问。

watch：侦听属性

watch 属性允许您侦听属性的变化并执行回调函数。这意味着，当属性的值发生变化时，您可以在回调函数中执行一些操作，例如更新UI、发送网络请求或触发其他操作。

watch 属性的语法如下：

watch: {
  propertyName: {
    handler(newValue, oldValue) {
      // 当propertyName属性发生变化时执行此函数
    },
    immediate: true // 立即执行处理器
  }
}

computed和watch都是Vue.js中用于响应式编程的工具，但它们之间存在一些关键区别：

computed是计算属性，它依赖于其他属性并自动更新。而watch是侦听属性，它在属性发生变化时执行回调函数。
computed的值可以被模板和计算属性访问，而watch的回调函数只能被模板访问。
computed的值是惰性的，这意味着只有当它被访问时才会计算。而watch的回调函数是立即执行的，除非您显式地将其设置为 immediate: false。