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无缓存性，值不变化也会执行