简述Vue中watch用法详解 ?

最新推荐文章于 2025-02-20 20:24:12 发布

原创最新推荐文章于 2025-02-20 20:24:12 发布 · 504 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue2 专栏收录该内容

65 篇文章

订阅专栏

watch 是 Vue 中的一个重要特性，它可以监听 Vue 实例上数据的变化。

基本用法是在 Vue 实例的 watch 选项中定义一个对象，对象的属性对应要监听的数据，属性的值是当对应的数据变化时要执行的函数。

例如：

new Vue({
  data: {
    count: 0
  },
  watch: {
    count: function (newVal, oldVal) {
      console.log(`count 变更为： {newVal}，旧值为：{oldVal}`);
    }
  }
})

在这个例子中，每当 count 的值变化，就会打印出新旧值。

还有一些高级用法：

深度监听：默认情况下，watch 只能监听到数据的一级属性的变化。如果要监听到对象的所有层级的变化，可以设置 deep 选项为 true。
```
new Vue({
  data: {
    obj: {
      a: 1
    }
  },
  watch: {
    obj: {
      handler: function (newVal, oldVal) {
        console.log('obj 变化了');
      },
      deep: true
    }
  }
})
```
在这个例子中，无论 obj 的哪一级属性变化，都会触发回调函数。
立即执行：默认情况下，watch 的回调函数只有在数据变化时才会执行。如果要在 Vue 实例创建时就执行回调函数，可以设置 immediate 选项为 true。
```
new Vue({
  data: {
    count: 0
  },
  watch: {
    count: {
      handler: function (newVal, oldVal) {
        console.log(`count 变更为： {newVal}，旧值为：{oldVal}`);
      },
      immediate: true
    }
  }
})
```
在这个例子中，count 的 watch 回调函数会在 Vue 实例创建时就执行一次。