初识Vue中的computed、watch、methods

Vue.js 中的computed、watch和methods都是用于处理响应式数据的工具，但它们各自具有不同的特性和使用场景。

computed是一种计算属性，它会根据所依赖的响应式数据的变化而自动更新。这意味着只要依赖项发生了改变，computed属性就会重新计算并更新其值。

computed属性的计算规则由一个函数来定义，这个函数将依赖项作为参数，并返回computed属性的值。例如：

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

在上面的例子中，computed属性fullName依赖于firstName和lastName这两个响应式数据。当firstName或lastName发生改变时，fullName会自动更新，并返回最新的全名。

watch是一种监视器，它可以监视一个或多个响应式数据的变化，并在变化时执行某个函数。与computed不同，watch不会自动更新其值，它只会在监视的响应式数据发生变化时执行一次函数。

watch的语法如下：

watch: {
  firstName: function(newVal, oldVal) {
    // 当firstName发生变化时执行此函数
  },
  lastName: {
    handler: function(newVal, oldVal) {
      // 当lastName发生变化时执行此函数
    },
    immediate: true // 立即执行一次
  }
}

在上面的例子中，watch监视了firstName和lastName两个响应式数据。当firstName或lastName发生变化时，watch会执行相应的函数。

methods是一种方法，它包含了一系列可以被组件调用的函数。methods中的函数不会自动执行，只有当它们被显式调用时才会执行。

methods的语法如下：

methods: {
  greet: function() {
    alert('Hello world!');
  },
  sayHello: function(name) {
    alert('Hello ' + name + '!');
  }
}

在上面的例子中，methods中包含了两个函数：greet和sayHello。当调用greet函数时，它会弹出"Hello world!"的提示框。当调用sayHello函数时，它会弹出"Hello " + name + "!"的提示框。

computed、watch和methods是Vue.js中处理响应式数据的三种不同方式，它们的主要区别在于：

• computed：computed是一种计算属性，它会根据所依赖的响应式数据的变化而自动更新。

• watch：watch是一种监视器，它可以监视一个或多个响应式数据的变化，并在变化时执行某个函数。

• methods：methods是一种方法，它包含了一系列可以被组件调用的函数。

• computed：当需要在一个组件中使用一个派生值时，可以使用computed。例如，计算一个对象的总价。

• watch：当需要在一个组件中监视一个或多个响应式数据的变化时，可以使用watch。例如，监视一个输入框的值，并在值发生变化时执行某个函数。

• methods：当需要在一个组件中定义一个函数时，可以使用methods。例如，定义一个函数来处理表单的提交。