浅谈： Vue watch监听deep、immediate属性

一：Watch简析

Vue watch 用于监测数据变化，可以方便开发中对于数据的变化做出一些处理。关于deep、immdiate属性场景使用总结如 下，如有疏漏，烦请指正。

二：常见用法。

watch: {
      //监听notes数组变化。调用saveNotes
     notes: 'saveNotes',
      //监听数据selectedId (string)，同时localStorage以MySelectedId键存储
     selectedId (newval,oldVal) {
        console.log('newval:'+newval,'oldVal:'+oldVal)
        localStorage.setItem('MySelectedId', newval)
      }
      //或者 method调用selectedIdWatch
    selectedId ：'selectedIdWatch'
  },

三：immediate立即执行。

watch监听只有在数据变化时才会执行监听函数。父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，此时也需要执行watch监听函数。则需设置immediate：true.

new Vue({
 el: '#app',
 data: {
   name: ''
 },
 watch: {
   name: {
   　　handler(newVal,oldVal) {  
        // ...
   　　},
   　　immediate: true
   }
 } 
})

四：deep深度监听

需要监听复杂数据（对象）内部属性的变化时，设置deep属性。Vue会递归的侦听数据和属性的变化（性能消耗较大）。也就是给所有数据和属性添加handler执行函数。

监听notes对象，未添加deep:

 watch: {
   //监听notes数组变化。调用saveNotes
   notes: 'saveNotes',
   selectedId (newval,oldVal) {       
         localStorage.setItem('MySelectedId', newval)
      }
   },
   methods: {
      //监听notes数组变化。
      saveNotes () {
        console.log("使用deep,监听content属性变化："+this.selectedNote.title)
         localStorage.setItem('myNotes', JSON.stringify(this.notes))          
       }
   }

执行效果

监听notes对象，，添加deep属性：

 watch: {
       //监听notes数组变化。调用saveNotes
      notes: {
         handler:function () {
            console.log("使用deep,监听content属性变化："+this.selectedNote.title)
            localStorage.setItem('myNotes', JSON.stringify(this.notes))  
         },
         deep: true  
      },
      selectedId (newval,oldVal) {       
         localStorage.setItem('MySelectedId', newval)
      }
   }

性能优化 鉴于deep属性Vue性能消耗较大，对于要监听数据中某个属性的响应时，可以只给对应属性添加deep。如下示例，只需侦听属性b的响应变化。

new Vue({
  el: '#app',
  data: {
    wachter: {
      a: 'value', 
      b: true
     }
  },
  watch: {
    wachter.b: {
      handler(newVal,oldVal) {
      // ...
    },
    deep: true   
    }
  } 
})