vue之watch

watch的作用

watch是vue2x中提供的一个options API，它可以帮助我们监听页面中的响应式数据，一旦数据发生了会变就会触发watch中的属性或者方法

watc的形式

1. 函数形式
   2.对象形式(可以配置深度监听/immediate立即执行)
   3.通过this.$watch调用，通常在生命周期created使用

函数写法

watch: {
  dataForm (newForm,oldForm) {
    ...
  }
}

this调用

created () {
  this.$watch('userInfo.userName',function(newName,oldName) {
    console.log('newName',newName)
  },{
    deep: true,
    immediate: true
  })
}

对象写法

watch: {
  dataForm: {
    deep: true,
    handler: function (newForm,oldForm) {
      ...
    }
  }
}

小栗子

对象的语法形式可以设置deep属性，对数据进行深度监听

小技巧：

• 当我们需要监听数组中某个对象的属性时，推荐单独创建一个组件，对组件中最难过的单个值做出监听，这样做的好处是无需deep深度监听，提升性能