Vue：剖析 computed 与 watch 的奥秘，深入理解响应式编程

揭开 computed 的神秘面纱

computed 是 Vue 中的计算属性，它是一种特殊的属性，其值是根据其他属性的值计算出来的。与普通属性不同，computed 属性不需要加括号，就可以直接像属性一样使用，无需调用函数。

computed 属性的本质是函数，它可以接收其他属性作为参数，并返回一个计算结果。当依赖的属性发生变化时，computed 属性也会自动更新其值，并触发视图的重新渲染。这种自动更新的机制使得 computed 属性非常适合用于需要根据其他数据动态计算的场景。

computed 属性有以下几个特点：

• 它是一个函数，可以接收其他属性作为参数。
• 它返回一个计算结果，该结果可以是一个简单值，也可以是一个复杂的对象。
• 它是一个缓存属性，只有当依赖的属性发生变化时，才会重新计算。
• 它是一个只读属性，不能直接赋值。

computed 属性的应用场景

computed 属性的应用场景非常广泛，以下是一些常见的场景：

• 计算总价：在一个电商应用中，computed 属性可以根据商品的价格和数量计算出总价。
• 计算折扣：在一个折扣系统中，computed 属性可以根据商品的原价和折扣率计算出折扣后的价格。
• 计算日期：在一个日期选择器中，computed 属性可以根据选定的日期计算出星期几。
• 计算状态：在一个状态管理系统中，computed 属性可以根据其他属性计算出当前的状态。

watch：时刻关注数据的变化

watch 是 Vue 中的侦听工具，它可以监视一个或多个属性的变化，并在变化发生时执行回调函数。watch 的回调函数可以执行任何操作，比如更新数据、发送请求、触发事件等等。

watch 的语法如下：

watch: {
  property: {
    handler: function (newValue, oldValue) {
      // 当属性发生变化时执行的回调函数
    },
    immediate: true // 是否立即执行回调函数
  }
}

watch 有以下几个特点：

• 它可以监视一个或多个属性的变化。
• 它可以在属性发生变化时执行回调函数。
• 它可以通过 immediate 选项控制是否立即执行回调函数。
• 它可以接收两个参数，分别是新值和旧值。

watch 的应用场景

watch 的应用场景也非常广泛，以下是一些常见的场景：

• 监控表单输入：在一个表单中，watch 可以监控输入框的值的变化，并在值发生变化时进行验证。
• 监控路由变化：在一个 SPA 应用中，watch 可以监控路由的变化，并在路由发生变化时加载新的数据。
• 监控数据变化：在一个数据管理系统中，watch 可以监控数据的变化，并在数据发生变化时更新视图。
• 监控状态变化：在一个状态管理系统中，watch 可以监控状态的变化，并在状态发生变化时触发事件。

computed 与 watch 的区别

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

• computed 是计算属性，watch 是侦听工具。
• computed 是根据其他属性的值计算出来的，watch 是在属性发生变化时执行回调函数。
• computed 是只读的，不能直接赋值，watch 是可写的，可以随时更新值。

小结

computed 和 watch 是 Vue 中非常重要的两个工具，它们共同协作，实现了响应式编程的强大功能。通过理解这两个工具的工作原理、区别和应用场景，开发者可以更熟练地使用 Vue，并在前端开发中构建出更加动态、响应迅速的应用。