vue 中 watch 的使用

watch的作用可以监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。

一、基本使用

1. 变量监听

<input type="text" v-model="name" />
 {{watchName}}

export default {
  data () {
    return {
      name: '',
      watchName:''
    }
  },
  watch: {
    name (val) {
      this.watchName = val;
    }
  }
}

直接监听变量，这种使用方式是 watch 最简单的最基础的监听方式。
当然我们也可以写一个监听处理函数，当每次监听到变量发生变化时执行函数。代码如下：

watch: {
    // name (val) {
    //   this.watchName = val;
    // },
    name: 'nameChange'
  },
  methods: {
    nameChange () {
      this.watchName = this.name;
    }
  }

2.对象监听

对象的监听我们可以按照如下方式：

 <input type="text" v-model="formItem.name" />
  {{watchObjName}}

'formItem.name' (val) {
    this.watchObjName = val;
}

也可以借助 computed 计算属性来完成。

<input type="text" v-model="formItem.name" />
  {{watchObjName}}

watch: {
    // name (val) {
    //   this.watchName = val;
    // },
    name: 'nameChange',
    newName (val) {
      this.watchObjName = val;
    }
  },
  computed: {
    newName () {
      return this.formItem.name;
    }
  }

二、immediate 和 handler

上面介绍的 watch 的用法有个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值得时候也执行函数，就需要用到 immediate 属性。具体用法请看具体代码。

name: {
    handler (val) {
        this.watchName = val;
    },
    immediate: true
}

监听的数据不再像之前一样写，而是写成对象的形式，包含 handler 和 immediate ，之前我们写的函数其实就是写在这个 handler 方法；

immediate 表示在 watch 中首次绑定数据的时候是否执行 handler ，值为 true 则表示在 watch 声明的时候就立即执行 handler 方法，值为 false 时，则和一般使用 watch 一样，在数据发生变化的时候才执行 handler。

三、deep 深度监听

当需要监听复杂的数据类型（对象）的改变时，普通的 watch 方法无法坚挺到对象内部属性的改变，只有 data 中的数据才能监听到变化，此时就需要使用 deep 属性对对象进行深度监听。

<input type="text" v-model="person.name" />

  data () {
    return {
      person: {
        id: 1,
        name: '沐'
      }
    }
  }

watch: {
    person: {
      handler (val) {
        console.log('深度监听：', val);
      },
      deep: true
    }
  }

设置了 deep 为 true ，可以监听到 person.name 的变化，但是这种写法会给 person 的所有属性都加上这个监听器，当对象属性较多时，每个属性值得变化都会执行 handler 。如果只需要监听对象中一个属性的值，则可以使用字符串的形式监听对象属性，也就是上面介绍的对象监听。

 

数组（一维、多维）的变化不需要通过深度监听，对象数据中对象的属性变化则需要深度监听。

四、问题

在变更（不是替换）对象或者数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。vue不会保留变更之前的副本。

解决办法，配合computed深度复制,例如

data() {
    return {
      DeviceList:[],
    };
 },
computed:{
    NewDeviceList(){
        // 新的赋值
          return JSON.parse(JSON.stringify(this.DeviceList));
    }
 },
watch:{
    NewDeviceList:{
      handler(newV,oldV){
          // 此时的 新老数据是不同的 
      },
      deep: true
    }
  }