从不同的角度认识Computed与Watch之异同

在Vue.js中，computed属性和watch方法都是响应式系统的重要组成部分，用于管理组件状态变化。尽管两者在实现响应式更新方面有着相似之处，但它们在使用场景、语法、实现方式和性能优化等方面存在着一些关键区别，了解这些区别对于有效地使用它们来开发高质量的Vue.js应用程序至关重要。

相似之处：响应式更新

computed属性和watch方法都允许您在Vue.js组件中定义响应式数据，以便在数据发生变化时自动更新视图。这使得您能够轻松地构建动态和交互式的用户界面，无需手动跟踪和更新状态。

computed属性：计算属性

• 定义方式： computed属性使用getter函数定义，它返回一个计算属性的值。该getter函数可以依赖其他响应式属性，当这些属性的值发生变化时，计算属性的值也会自动更新。
• 语法： ```
  computed: {
  computedProperty: {
  get: function () {
  // 计算属性的计算逻辑
  }
  }
  }

* **使用场景：** computed属性通常用于计算不需要频繁更新或开销较大的值，例如，您可以使用computed属性来计算组件的总价格，该价格依赖于组件中其他属性（如数量和单价）。

#### **watch方法：侦听属性变化** 

* **定义方式：** watch方法接受一个监听目标（可以是组件中的任何响应式属性或表达式）和一个回调函数作为参数。当监听目标的值发生变化时，回调函数就会被触发。
* **语法：** 

watch: {
watchTarget: {
handler: function (newValue, oldValue) {
// 回调函数
},
// 可选参数：
immediate: true, // 立即执行回调函数
deep: true // 深度监听数组或对象的变化
}
}

* **使用场景：** watch方法通常用于侦听特定属性的变化并执行相应的操作，例如，您可以使用watch方法来侦听组件中输入框的值变化，并在值发生变化时更新服务器上的数据。

#### **性能优化：** 

* **computed属性：** 由于computed属性的值是通过getter函数计算得来的，因此它只会在需要时计算一次。这可以帮助减少不必要的计算，提高性能。
* **watch方法：** watch方法会对监听目标进行持续的监听，这可能会导致性能开销。因此，在使用watch方法时，应谨慎选择监听目标，避免监听不必要的属性。

#### **总结：** 

computed属性和watch方法都是Vue.js中用于管理组件状态变化的响应式特性，但它们在使用场景、语法、实现方式和性能优化等方面存在着一些关键区别。通过理解这些区别，您可以更好地选择合适的特性来优化代码结构并提高开发效率。