1.watch:用來監聽每一個屬性的變化 2.watch這個對象裡面都是函數,函數的名稱是data中的屬性名稱,watch中的函數不需要調用 3.當屬性發生改變那麼就會觸發watch函數,每個函數都會接受兩個值,一個是新值,一個是舊值 4.我們可以在watch當中就行新舊值的判斷來減少虛擬dom的渲 ...
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>