1. 程式人生 > >vue裡的watch 和 computed 監聽的不同

vue裡的watch 和 computed 監聽的不同

1.computed裡是偏向於通過監聽data裡的值變化後,經過運算返回一個新的計算結果,

   所以k不能與data裡的k重名,並且必須有return,

    能夠快取,依賴的值不變化不會進行重複計算;

而watch是監聽data裡的值的變化,k是data裡的k,不能自己單獨定義k

    watch裡經常放非同步函式。

    不能快取。

 

watch顧名思義,用於監聽資料變化,其中可以監聽的資料來源有三部分:props、data、computed內的資料;watch提供兩個引數(newValue,oldValue),第一個引數是新值,第二個引數儲存舊值;

computed用於處理複雜的邏輯運算,主要和methods儲存方法來進行區分;methods儲存方法,,computed儲存需要處理的資料值;methods每次都會呼叫,computed有快取機制,只有改變時才執行,效能更佳;

 1   <div id="app">
 2         <input type="text" v-on:input='input'>
 3         <ul>
 4             <li v-for='item in result'>{{item}}</li>
 5
</ul> 6 </div> 7 <script src="vue.js"></script> 8 <script> 9 var vm = new Vue({ 10 el:'#app', 11 data:{ 12 flag: false, 13 result:[], 14 15 }, 16 methods:{ 17
input:function(){ 18 this.flag = true 19 } 20 }, 21 watch:{ 22 flag:function(newValue,old){//兩個引數表示變化之前的值和變化之後的值

setTimeout(()=>{
24 this.result = [1,2,3,4,5]

25 console.log(old,newValue)

26 },500)

27 }

28 }

29 })