vue中computed和watch

computed 計算屬性

能夠監聽vue數據上的變化，頁面上來就執行一次，每改變一次數據就又觸發。在操作數據的時候，會派生出另一個事情

1、函數形式
computed:{
    listenArr(){
    /*
    使用data中數據，自動幫你監聽數據的變化
    返回的結果就是通過改變數據 做的另一件事情（當數據變化時候需要做的事情）
    */
    }
}

2、對象形式
computed:{
    listenArr:{
        get(){
            //獲取時候
        },
        set(newVal){
            //修改時候
        }
    }
}

 

get是獲取的時候執行的操作。set是修改時候執行的操作

應用場景：

比如在用戶輸入框改變數據的時候過濾數字；

通過數據的變化，來進行累計；

通過單選按鈕的變化，來進行判斷是否全選等等

 

優點：指定看哪個數據，就只看哪個數據

PS：需要注意的是  函數名，不要和data中的數據一樣。

<div id="app">      
        全選
        <input type="checkbox" v-model="all">
        <hr>
        <input type="checkbox" v-for="(val,key) in arr" v-model="val.checked">{{arr}}
</div>

 new Vue({
        el:'#app',
        data:{
            arr:[
                {checked:true},
                {checked:false},
                {checked:false},
                {checked:true}
            ]
        },
        //當使用get和set時候，computed中定義的屬性為一個對象
        //當不使用get和set時候，computed中定義的屬性可以是一個函數
        computed:{
           /*
            all(){
                return this.arr.every(e=>e.checked);
            }
           */
            all:{
                get(){
                    //獲取的時候執行的操作
                   return this.arr.every(e=>e.checked);
                },
                set(newVal){
                    //修改時候執行的操作。其中newVal 是改變之后的結果
                    return this.arr.forEach(e=>e.checked = newVal)
                }
            }
        }
        
    });

 

watch 指定數據監聽器

當指定數據發生變化時候觸發。一開始不會觸發，只有指定的數據發生變化就又觸發一次

 

第一種寫法：

watch:{

　　要監聽的數據名(新的數據，舊的數據){

　　//只能監聽一層，兩層或者深層監聽不到，需要deep為true(深度監聽)

　　}

}

 

第二種寫法

watch:{

　　要監聽的數據名(新的數據，舊的數據){

　　handler(){

 　　　　//執行的操作

　　},

　　deep:true

　　}

}

應用場景：

監聽路由參數的變化

種localStorage的時候，深度添加等等

 <div id="app">      
       <input type="text" v-model="val">
       <ul>
           <li v-for="(val,key) in arr">
               <input type="checkbox" v-model="val.checked">
           </li>
       </ul>
       {{arr}}
 </div>

new Vue({
        el:'#app',
        data:{
            val:'hao123',
            arr:[
                {checked:true},
                {checked:false},
                {checked:false},
                {checked:false}
            ]
            
        },
        watch:{
            arr:{
                handler(v){
                    localStorage.setItem('data',JSON.stringify(v))
                },
                deep:true
            }
        }

    });
    function getStorage(name){
        //存儲到本地
        let data = localStorage.getItem(name) || '[{"checked":false},{"checked":false},{"checked":false}]';
        return  JSON.parse(data); //[] -> [{}]
    }

 

總結：computed和watch都起到監聽一個數據，並進行處理的作用 

計算屬性會根據依賴的屬性進行緩存，只有依賴的屬性發生變化，下次獲取的值才會重新計算

watch用於觀察和監聽vue實例，每當監聽的數據變化時都會執行回調進行后續操作

computed 是一個數據受多個數據影響，當進行數值計算並且依賴其他數據時應使用computed，可以利用其緩存特性 避免每次獲取值時重新計算

watch 是一個數據影響多個數據，主要用於數據變化時異步操作或者開銷較大的情況

computed在監聽數據變化時候，上來就會執行一次。而watch頁面上來是不會執行的，只有指定數據發生變化才會觸發

computed具有緩存性，值不變化會讀取緩存，watch無緩存性，值不變化也會執行