Vue Add Watcher

在Vue中，你可以使用watchers来监控一个Vue实例的数据变化，并在变化时做出相应的响应。Vue提供了一系列API来添加watchers，其中一个便是vue add watcher。

命令格式

vue add watcher <target-path> [-s, --shallow] [-i, --immediate] [-d, --deep] [--flush] [--prepend] [--force]

参数

• target-path: 监听的属性的路径，例如count或者obj.a。
• -s, --shallow: 仅监听target-path的直接属性变化，而不是其下层属性的变化。
• -i, --immediate: 是否在watcher被添加时立即运行一次回调函数。
• -d, --deep: 是否深度监听，会递归监听对象及其嵌套对象的变化。
• --flush: 是否在变化时进行批量更新。默认情况下，假设你在同一轮事件循环中修改了多个监控对象的属性，Vue将会在下一轮事件循环中异步批量更新视图。你可以开启这个选项来立即应用变化。
• --prepend: 当target-path所在的对象重新运算时，会自动将其移到最前面。建议在computed属性的回调函数中使用。
• --force: 强制覆盖原有的watcher。

示例

我们可以创建一个Vue实例，然后通过vue add watcher来添加一个watcher来监听count属性的变化：

const vm = new Vue({
  data() {
    return {
      count: 0
    }
  }
})

vm.$watch('count', function(newValue, oldValue) {
  console.log(`count变化了：${oldValue} => ${newValue}`)
})

可以看到，我们使用$watch方法添加了一个监听count属性的watcher。如果我们在其他地方改变了count的值，watcher的回调函数便会被执行：

vm.count++ // count变化了：0 => 1

结语

vue add watcher是Vue提供的一系列添加watcher的API之一，而watcher又是Vue中响应式编程的重要内容之一。希望这篇文章能够帮助你更好地理解和使用Vue。