1.watch：用來監聽每一個屬性的變化 2.watch這個物件里面都是函式，函式的名稱是data中的屬性名稱，watch中的函式不需要呼叫 3.當屬性發生改變那么就會觸發watch函式，每個函式都會接受兩個值，一個是新值，一個是舊值 4.我們可以在watch當中就行新舊值的判斷來減少虛擬dom的渲染 eg： watch:{ a(newVal,oldVal){ if(newVal != oldVal){ this.sum = newVal+this.b; } console.log("a發生了改變",newVal,oldVal) } 5.只要是當前的屬性值發生改變就會觸發它所對應的函式 6.如果我們需要對物件進行監聽的時候需要將屬性值設定為key值，val值為一個物件，物件中有兩個引數是必填，一個是handler函式，一個是deep為true，這樣才能實作深度監聽 eg： obj:{ handler(newVal){ console.log("obj發生了改變",newVal) }, deep:true } demo:
<div id = "computed_props"> 千米 : <input type = "text" v-model = "kilometers"> 米 : <input type = "text" v-model = "meters"> </div> <p id="info"></p> <script type = "text/javascript"> var vm = new Vue({ el: '#computed_props', data: { kilometers : 0, meters:0 }, methods: { }, computed :{ }, watch : { kilometers:function(val) { this.kilometers = val; this.meters = this.kilometers * 1000 }, meters : function (val) { this.kilometers = val/ 1000; this.meters = val; } } })；</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/27684.html
標籤：其他
上一篇：jQuery---事件的執行順序