vue中computed和watch

Posted 2021-02-08 theblogs

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 指定数据监听器

当指定数据发生变化时候触发。一开始不会触发，只有指定的数据发生变化就又触发一次

 

第一种写法：

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都起到监听一个数据，并进行处理的作用 

computed主要用于对同步数据的简单处理，watch则主要用于数据输入时异步操作或者开销较大的情况

computed在监听数据变化时候，上来就会执行一次。而watch页面上来是不会执行的，只有指定数据发生变化才会触发

computed具有缓存性，值不变化会读取缓存，watch无缓存性，值不变化也会执行