methods、computed、watch它们的差异与区别

在Vue中，Methods、Watch和Computed是三种用于处理数据和响应数据变化的不同方式。

1. Methods（方法）：Methods是Vue实例中定义的方法，可以在模板中调用。它通常用于响应用户交互或触发某些操作。Methods中的方法在每次调用时都会执行，并且可以接收参数。Methods适用于需要执行一些逻辑操作或者需要传递参数的情况。

javascriptCopy Codemethods: {
  handleClick() {
    // 执行一些操作
  }
}

1. Watch（侦听器）：Watch用于监听数据的变化，并在数据变化时执行相应的操作。通过在Vue实例中定义一个watch对象，可以监听指定数据对象的变化，并执行相应的回调函数。Watch可以执行异步操作、复杂的计算逻辑或者需要对多个数据进行综合处理的情况。

javascriptCopy Codewatch: {
  dataProperty(newValue, oldValue) {
    // 数据变化时执行的操作
  }
}

1. Computed（计算属性）：Computed用于根据已有的数据计算出新的数据，并将结果缓存起来，只有当依赖的数据发生变化时，才重新计算。Computed属性是基于响应式依赖进行缓存的，只有相关依赖发生变化时，才会重新计算，否则直接返回缓存结果。Computed适用于需要经过计算得到的数据，或者是依赖其他数据进行计算的情况。

javascriptCopy Codecomputed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

总结：

• Methods适用于需要执行一些操作或者处理用户交互的场景，每次调用都会执行。
• Watch适用于监听数据变化，并在数据变化时执行相应操作，可以执行异步操作或者对多个数据进行综合处理。
• Computed适用于根据已有数据计算出新的数据，并缓存结果，只有相关依赖发生变化时才会重新计算。

Methods：主动调用，每次调用，没有缓冲，支持异步

Computed：被动计算，一次计算，拥有缓存，不可异步

Watch：主动监控，每次监控，没有缓存，支持异步，深度监控，立即监控