computed 計算屬性

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

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 指定數據監聽器

應用場景：

種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都起到監聽一個數據，並進行處理的作用

computed主要用於對同步數據的簡單處理，watch則主要用於數據輸入時異步操作或者開銷較大的情況

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

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

vue中computed和watch