vue.js中watch的高级用法

从官方文档知道，vueJS开发中视图对于数组/对象的变化捕捉需要特定的数据更新操作才会触发渲染。

那么现实开发中，我们又要如何实现对数组/对象的watch监听呢？

普通数据的watch

data() {
  return {
    tempData: 'string'
  };
},
watch: {
  // vue监听普通数据
  tempData(val) {
      console.log(val)
  }
}

对象属性的watch

data() {
  return {
    params: {
      orderType: ['1'],
      timeType:[]
    }
  };
},
watch: {
  // vue监听对象数据
  params: {
    handler(newvalue, oldvalue) {
      console.log({ 监听变化: newvalue });
    },
    deep: true
  }
}

由上面的代码可以看到，二者对数据的watch监听差异在于deep这个变量，根据以上问题，可以引出Vue的一些高级用法：

handler方法和immediate属性

实际开发中，可以发现watch的一个特点，在Vue组件的生命周期里，最初的数据绑定阶段，watch监听并不会执行，需要等到数据发生改变时才会执行watch监听的相应计算。如果希望在初始化阶段就执行watch监听该如何处理呢？其实修改一下watch的写法就可以实现，(以之前的代码为例)代码如下：

data() {
  return {
    params: {
      orderType: ['1'],
      timeType:[]
    }
  };
},
watch: {
  // vue监听对象数据
  params: {
    handler(newvalue, oldvalue) {
      console.log({ 监听变化: newvalue });
    },
    immediate: true
  }
}

上面的代码可以发现，相比原来的watch，改良后的watch多了handler和immediate，其实普通的watch方法里默认写的就是handler函数，经过vuejs的编译之后就会生成handler。

而immediate:true则表示当watch监听的变量被声明之后，会立即去执行一次handler方法。默认为immediate:false这也是之所以第一次数据赋值时并不会触发watch的原因了。

deep属性

watch 里面还有一个属性 deep，默认值是 false，代表是否深度监听。受限于Vue对于对象/数组的监听限制，Vue无法检测到对象属性的添加或删除，所以监听对象的属性变化就受到限制，但是添加deep配置就可解决该问题了！

慎独

欲说还休

Vue.js中watch的高级用法

handler方法和immediate属性

deep属性