vue中watch用法

在Vue中，可以使用watch来响应数据的变化。watch的用法大致有三种。下面是watch的一种简单用法：

<input type="text" v-model="cityName"/>
new Vue({
  el: '#root',
  data: {
    cityName: 'shanghai'
  },
  watch: {
    cityName(newName, oldName) {
      // ...
    }
  }
})

这段代码中，我们在Vue实例中定义了一个data属性cityName，并使用v-model指令将其绑定到一个输入框上。然后，在Vue实例的watch选项中，我们使用了一个cityName的watcher，并定义了一个handler函数来处理数据变化的逻辑。当cityName发生变化时，watcher会自动调用handler函数，并传入新值和旧值作为参数。

除了简单的watch用法外，还有两种特殊的用法。一种是immediate属性，它表示在watch中首次绑定数据时，是否立即执行handler函数。如果immediate为true，则在watch声明的时候就会立即执行handler方法；如果immediate为false，则和一般使用watch一样，在数据发生变化时才执行handler。

另一种特殊用法是深度监听，使用deep属性来对对象进行深度监听。普通的watch方法无法监听对象内部属性的改变，只能监听到对象的引用变化或整个对象的替换。但是使用deep属性后，watch可以递归监听对象内部属性的改变。

<input type="text" v-model="cityName.name"/>
new Vue({
  el: '#root',
  data: {
    cityName: {id: 1, name: 'shanghai'}
  },
  watch: {
    cityName: {
      handler(newName, oldName) {
        // ...
      },
      deep: true,
      immediate: true
    }
  }
})

这段代码中，我们将cityName修改为一个对象，同时在watch中使用了一个带有深度监听和立即执行的cityName的watcher。这样，无论是cityName的引用变化还是内部属性的改变，watcher都会调用handler函数。

总结起来，Vue中的watch用于监听数据的变化，并在变化时执行相应的逻辑。可以使用简单的watch，也可以使用immediate和deep属性来实现更复杂的监听需求。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>