(vue2 watch) vue2中watch的用法(通俗易懂,简单明了) Vue中的Watch选项全网首发(图文详解1)

(vue2 watch) vue2中watch的用法(通俗易懂,简单明了)

Vue中的watch选项是一种特殊的Vue功能，它允许数据监听，现在我们详细来解释一下。

什么是 watch？
watch 是Vue中的一个属性，我们可以使用它来观察和响应Vue实例上的数据变化。
如何使用 watch？
在你的Vue实例中，可以定义一个 watch 对象，对象里的每个属性对应你需要观察的表达式，当观察的表达式的值发生改变时，相应的handler函数就会调用.

具体例子：
```
var vm = new Vue({
  data: {      
    a: 1
  },
  watch: {
    a: function(newVal, oldVal){
      console.log('new: %s, old: %s', newVal, oldVal);
    }
  }
});
```
在这个例子中，当 a 发生改变时，回调函数就会被触发，打印出新的 a 值和老的 a 值。
可以进行深度监测
watch 还提供了一个 deep 属性，当你需要监测包含对象或数组等深度数据的变化时可以使用。

例如：
```
data: {
  Obj: {
    inner: 'hello'
  }
},
watch: {
  Obj: {
    handler: function(newVal, oldVal){
      console.log('Object Changed');
    },
    deep: true
  }
}
```
在这个例子中，如果 Obj.inner 的值发生了改变，那么 Object Changed 就会被打印出来了。
watch 也提供了 immediate 属性，当数据初始化时，也会调用回调
例如：
```
new Vue({
 data: {
   user: 'Hopper'
 },
 watch: {
   user: {
     handler: function(val, oldVal) { console.log(val, oldVal); },
     immediate: true
 }
});
```
在这个例子中，一开始 user 就是 Hopper，所以回调函数就会运行打印出 'Hopper', undefined。
watch 和计算属性：
watch ‘监听’一个属性，然后进行某种行为，这种方式在一些情况下是有用的，但在一些情况下，我们更希望是数据有依赖关系时，自动更新，这时候，我们会使用计算属性（computed 属性）。