Vue中如何深入理解watch和computed的区别与用法？

本文共计3388个文字，预计阅读时间需要14分钟。

前言：对于使用Vue的前端开发者而言，watch、computed和methods三个属性是不可或缺的。它们是日常开发中经常使用的属性。但是，对于它们的区别及使用场景，或许并不清晰。本文将跟大家一起通过源码来了解它们。

一、watch

watch是Vue中的一个属性，用于监视数据的变化。当数据发生变化时，watch中的函数会被调用。

javascriptdata() { return { message: 'Hello, Vue!' };},watch: { message(newVal, oldVal) { console.log('message changed from', oldVal, 'to', newVal); }}

二、computed

computed也是Vue中的一个属性，用于计算属性。它依赖于data中的数据，当依赖的数据发生变化时，computed中的函数会重新计算。

javascriptcomputed: { reversedMessage() { return this.message.split('').reverse().join(''); }}

三、methods

methods是Vue中的一个属性，用于定义方法。当在模板中调用方法时，会执行定义在methods中的函数。

javascriptmethods: { reverseMessage() { return this.message.split('').reverse().join(''); }}

总结：

- watch：用于监视数据的变化，常用于异步操作，如监听input输入、监听路由变化等。