关于Vue的 watch、computed和methods的区别汇总

请听我详细讲解“关于Vue的 watch、computed和methods的区别汇总”的完整攻略：

Watch

watch 是 Vue 提供的用于观察属性变化的方法，当数据发生变化时执行回调函数。通常情况下，watch 可以用来监听一个数据对象中深层次的属性变化，当属性变化后执行具体的操作，例如网络请求、计算等。

可以使用 vm.$watch 方法将所需要的属性关联到回调函数上，具体的代码示例如下：

// 在 Vue 实例创建之后调用 `vm.$watch()`
watch: {
  // 监听 firstName 属性变化
  firstName: function (val, oldVal) {
    console.log('new: ' + val + ', old: ' + oldVal)
  },
  // 监听 lastName 属性变化
  lastName: function (val, oldVal) {
    console.log('new: ' + val + ', old: ' + oldVal)
  }
}

当 firstName 或 lastName 发生改变时，分别会触发回调函数，输出新值和老值。

Computed

computed 是 Vue 提供的计算属性，是一种基于依赖进行缓存的属性，它的值是通过对其它属性进行计算得到的。当依赖的数据发生变化时，computed 会重新计算。

可以通过 get 和 set 方法定义 computed 属性，get 方法用于获取值，set 方法用于修改值。

下面是一个计算属性的示例，根据输入的 firstName 和 lastName 生成全名：

computed: {
  fullName: {
    // 获取值
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // 修改值
    set: function (newVal) {
      var names = newVal.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

当 firstName 或 lastName 发生改变时，computed 会重新计算 fullName，返回新值。

Methods

methods 是 Vue 实例中定义的一个方法集合，用于处理页面上的交互逻辑。methods 方法可以在模板中被调用，或通过 vm.$methods 来调用。

具体示例如下：

methods: {
  // 点击按钮
  changeColor: function (color) {
    this.backgroundColor = color;
  }
}

当点击按钮时，会调用 changeColor 方法，将背景颜色修改为指定的颜色。

区别汇总

总结一下三者的区别：

• watch 用于侦听某个值的变化，当该值有变化时，执行回调函数。应用场景：监听对象的深层次变化。
• computed 计算属性会基于它所依赖的响应式依赖进行缓存，直到某个依赖值发生改变，才会重新计算。应用场景：根据数据计算而来的属性。
• methods 定义一些方法，用于处理页面上的交互逻辑。应用场景：处理页面上的交互逻辑。

以上就是关于 Vue 的 watch、computed 和 methods 的区别汇总的攻略，希望能够对你有所帮助。