vue中watch的用法總結以及報錯處理Error in callback for watcher "checkList"

　　首先確認 watch是一個對象，必定要當成對象來用。 對象就有鍵，有值。

　　鍵：就是你要監控的那個傢伙，好比說$route，這個就是要監控路由的變化，或者是data中的某個變量。

　　值能夠是函數：就是當你監控的傢伙變化時，須要執行的函數，這個函數有兩個形參，第一個是當前值，第二個是變化後的值。

　　值也能夠是函數名：不過這個函數名要用單引號來包裹。

　　第三種狀況厲害了。 值是包括選項的對象：選項包括有三個。

　　一、第一個handler：其值是一個回調函數。即監聽到變化時應該執行的函數。

　　二、第二個是deep：其值是true或false；確認是否深刻監聽。（通常監聽時是不能監聽到對象屬性值的變化的，數組的值變化能夠聽到。）

　　三、第三個是immediate：其值是true或false；確認是否以當前的初始值執行handler的函數

var vm = new Vue({ data: { a: 1, b: 2 }, watch: { a: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) }, // 方法名
    b: 'someMethod', // 選項的對象
 c: { handler: function (val, oldVal) { /* ... */ }, deep: true， immediate: true } } })

　　具體的用法能夠直接看下面的示例，簡單直接

    <div id="app">  
        <input type="text" v-model:value="childrens.name" />  
        <input type="text" v-model:value="lastName" />  
    </div>  
    
    <script type="text/javascript">     
        var vm = new Vue( { el: '#app', data: { childrens: { name: '小強', age: 20, sex: '男' }, tdArray:["1","2"], lastName:"張三" }, watch:{ childrens:{ handler:function(val,oldval){ console.log(val.name) }, deep:true//對象內部的屬性監聽，也叫深度監聽 
 }, 'childrens.name':function(val,oldval){ console.log(val+"aaa") },//鍵路徑必須加上引號 
 lastName:function(val,oldval){ console.log(this.lastName) } },//以V-model綁定數據時使用的數據變化監測 
 } ); vm.$watch("lastName",function(val,oldval){ console.log(val) })//主動調用$watch方法來進行數據監測</span> 
    </script>  
    </body>  

　　一個報錯的問題處理：Error in callback for watcher "checkList": "TypeError: Cannot read property

　　解決方法：handler:(val,oldVal)=>{} 這樣會報錯，箭頭函數致使this指向出錯，改爲handler:function(val,oldVal){}這樣就行了

 watch:{ checkList:{ handler:(oldValue,newValue) => { let _sum = 0
                this.orderData.forEach(item => { if(this.checkList[item.order_id]){ _sum += item.service_price } }) this.sum = _sum }, deep:true } },

　　上面那樣寫會報錯，改爲下面這樣就能夠了，不要使用箭頭函數

 watch:{ checkList:{ handler:function(oldValue,newValue){ let _sum = 0
                this.orderData.forEach(item => { if(this.checkList[item.order_id]){ _sum += item.service_price } }) this.sum = _sum }, deep:true } },