简述Vue中watch用法详解 ?

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

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

例如：

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

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

还有一些高级用法：

1. 深度监听：默认情况下，watch 只能监听到数据的一级属性的变化。如果要监听到对象的所有层级的变化，可以设置 deep 选项为 true。

   new Vue({
     data: {
       obj: {
         a: 1
       }
     },
     watch: {
       obj: {
         handler: function (newVal, oldVal) {
           console.log('obj 变化了');
         },
         deep: true
       }
     }
   })
   

   在这个例子中，无论 obj 的哪一级属性变化，都会触发回调函数。

2. 立即执行：默认情况下，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 实例创建时就执行一次。