Vue 基础自查：watch、computed和methods的区别

2023-12-07 23:24:06

前言

Vue.js 是一种流行的 JavaScript 框架，用于构建交互式用户界面。Vue.js 采用响应式编程的模式，这意味着当数据发生变化时，与该数据绑定的视图也会自动更新。

在 Vue.js 中，有三种不同的方法可以响应数据的变化：watch、computed 和 methods。这三种方法都有各自的优缺点，在不同的场景下使用不同的方法可以达到最佳的效果。

watch

watch 方法用于监听数据的变化。当被监听的数据发生变化时，watch 方法就会被触发。watch 方法可以接受两个参数：

回调函数会在被监听的数据发生变化时被调用。回调函数可以接受一个参数，该参数是发生变化的数据的最新值。

watch: {
  count: function (newValue, oldValue) {
    // count 的值从 oldValue 变成了 newValue
  }
}

computed 属性用于计算数据的派生值。computed 属性可以依赖于其他数据。当依赖的数据发生变化时，computed 属性的值也会自动更新。

computed: {
  fullName: function () {
    return this.firstName + ' ' + this.lastName
  }
}

methods 方法用于定义 Vue.js 实例的方法。methods 方法可以在 Vue.js 实例中被调用。

methods: {
  incrementCount: function () {
    this.count++
  }
}

watch、computed 和 methods 这三种方法都有各自的优缺点。watch 方法可以用于监听数据的变化，computed 属性可以用于计算数据的派生值，methods 方法可以用于定义 Vue.js 实例的方法。

特性	watch	computed	methods
用途	监听数据的变化	计算数据的派生值	定义 Vue.js 实例的方法
触发时机	数据发生变化时	依赖的数据发生变化时	手动调用
性能	性能较低	性能较高	性能较高
适用场景	需要监听数据的变化时	需要计算数据的派生值时	需要定义 Vue.js 实例的方法时