3.computed | watch ( 数据监听）

computed（中文意思：计算）

是vue专有的一个计算属性

　　当数据发生变化的时候，通过变化的数据，做另一件事

只要使用， 一开始就会执行一次，之后只要数据发生变化就执行

 

定义:

　　函数( ){

　　　　return 是什么，显示就是什么

　　}

使用:

　　{{函数名}}

注意:

　　函数名不要跟data中的数据一致

 

computed 的静态方法之：get、set

computed:{
    all:{
        get(){
            return this.arr.every(e=>e.checked);
        },
        set(newValue){
            return this.arr.forEach(e=>e.checked = newValue)
        }
    }
}
/* 
    get(){
        //获取的时候
    }
    set(newValue){
        //修改的时候
        newValue就是改变之后的结果
    }
    当使用get、set的时候，那么computed中定义的属性，为一个对象
    当不使用get、set的时候，computed中定义的属性是可以为函数
*/

 

---

 watch 指定数据的监听器（监听一层、深度监听）

　　 一开始是不会触发的，只有数据变化才触发

 

/*
    watch（指定数据的监听器）：
        当指定数据发生变化的时候触发，一开始是不会触发的，只有数据变化才触发
    第一种写法:
        watch:{
            要监听的数据名(新的数据,更新之前的数据){
                只能监听一层，深层就监听不到
                []一层 -> [{}]多层
            }
        }
    
    第二种写法:
        watch:{
            要监听的数据名:{
                handler(新的数据,更新之前的数据){
                },
                deep:true  深度监听
            }
        }
*/
比如：

watch:{

　　arr:{

　　　　handler(v){

　　　　　　//localStorage.setItem('data',JSON.stringify(v));

　　　　},

　　　　deep:true

　　}

}

 

 

转载于:https://www.cnblogs.com/MrZhujl/p/10223164.html