Vue数据监听的几种方式-watch-Q 如何在Vue中监听数组和对象的变化

作者：机器人技术佬 | 发布时间：2025-06-20 |

Vue数据监听的几种方式

一、使用Vue的`watch`选项

Vue的`watch`选项就像是一个小助手，专门负责盯着你指定的数据属性。一旦这个属性值动了，`watch`就会立刻跳出来执行你给它安排的回调函数。

比如，我们可以在`watch`中这样写：

```javascript new Vue({ el: 'app', data: { message: 'Hello' }, watch: { message(newVal, oldVal) { console.log(`旧值: ${oldVal}, 新值: ${newVal}`); } } }); ```

二、使用计算属性（computed properties）

计算属性就像是你的小助手，它会根据其他数据属性的变化自动计算出一个新的值。虽然它主要是用来计算新值的，但也可以用来监听数据变化。

例如：

```javascript new Vue({ el: 'app', data: { firstName: 'John', lastName: 'Doe' }, computed: { fullName() { return `${this.firstName} ${this.lastName}`; } }, watch: { fullName(newVal, oldVal) { console.log(`旧值: ${oldVal}, 新值: ${newVal}`); } } }); ```

三、使用Vue的`watchEffect`方法

Vue 3新增了`watchEffect`方法，它就像是一个全能型的小助手，会自动追踪其依赖的响应式数据，并在数据变化时重新运行。

比如：

```javascript new Vue({ el: 'app', data: { message: 'Hello' }, watchEffect(() => { console.log(`当前消息: ${this.message}`); }) }); ```

四、为什么选择不同的数据监听方式

选择哪种数据监听方式取决于你的具体需求。

方式	适用场景
`watch`选项	需要精确监听特定数据属性，常用于异步操作或对比新旧值
计算属性	基于其他数据属性计算新值，间接实现数据监听
`watchEffect`方法	灵活处理响应式数据，自动追踪依赖的响应式数据

五、实例说明

下面是一个复杂的示例，展示如何在实际项目中使用这些数据监听方式：

```javascript new Vue({ el: 'app', data: { count: 0, message: 'Hello' }, watch: { count(newVal, oldVal) { console.log(`计数器从${oldVal}变为${newVal}`); } }, computed: { greeting() { return `你好，${this.message}`; } }, watchEffect(() => { console.log(`当前消息: ${this.message}`); }) }); ```

Vue提供了多种数据监听方式，选择合适的方式可以让你更灵活、高效地处理数据变化。

Vue数据监听的几种方式-watch-Q 如何在Vue中监听数组和对象的变化