vue watch監聽，handler、immediate和deep屬性用法

Vue.js提供了一個方法watch，用於觀察Vue實例上的數據變更。

用法：
  當title值變化的時候，watch纔會執行
  <div>
        <p>title:<input type='text' v-model='title' /></p>
  </div>
  <script type='text/javascript'>
  new Vue({
        el:'#app',
        data:{
              title:'監聽'
        },
        watch:{
              title(newVal,oldVal){
                    //      newVal打印的就是監聽到變化以後的title的值
                    console.log(newVal)
              }
        }
  })   
  </script>
  handler方法和immediate屬性：
  當咱們想讓值最初始的時候就執行watch，就會用到handler和immediate
  watch:{
        title:{
              handler(newVal,oldName){
                    console.log(newVal)
              },
              //  設置爲true表明在watch裏生明瞭title這個方法以後當即執行handler方法，若是設置爲false，效果和上邊例子同樣
              immediate:true,
        }
  }
  deep屬性：深度監聽，用於對象或者數組對象的監聽
   <div>
        <p>title:<input type='text' v-model='title.titleOne' /></p>
  </div>
  <script type='text/javascript'>
  new Vue({
        el:'#app',
        data:{
              title:{
                    titleOne:'deep監聽',
                    titleTwo:'hero-see'
              },
              arr:[{name:'小明',age:'18'},{name:'小紅',age:'16'}]
        },
        watch:{
              //對象深度監聽
               //方式一
              title:{
                    handler:function(newObj,oldObj){
                          console.log(newObj.titleOne)
                    },
                    //對象內部屬性監聽，也叫深度監聽
                    deep:true
              }，
               //方式二,直接監聽對象內部的某個值，鍵路徑必須加上引號
              "title.titleOne":{
                    handler:function(newVal,oldVal){
                          console.log(newVal)
                    },
                    //對象內部屬性監聽，也叫深度監聽
                    deep:true
              }，
              //數組對象深度監聽
              arr:{
                    handler(val){
                          console.log(val)
                    },
                    //數組對象監聽需加上deep屬性，表明遞歸監聽
                    deep:true
              }

        }
  })   
  </script>