我正在参加「掘金·启航计划」

computed

computed是选项式API中的一个计算属性，顾名思义就是通过data中已有属性计算得来的属性。

主要实现原理：Vue底层借助Object.defineproperty方法提供getter和setter❗get函数初次调用执行一次，所依赖的数据发生改变会被再次调用

与methods实现相比，computed有内部缓存机制，可以复用，效率更高

注意📢

计算属性最终会出现在Vue实例上(vm)直接读取使用即可
如果计算属性要被修改，那么必须通过set函数去响应修改(一般不修改)

举例

firstName：<input type="text" v-model="firstName"> <br>  
lastName：<input type="text" v-model="lastName"> <br>  
fullName: <span>{{fullName}}</span>

data:{ //为模板提供数据  
    msg:'hello Vue!',  
    firstName:'三',  
    lastName:'皮',  
},  
computed: {  
    fullName:{  
       // 读取fullName时调用get(),返回值就是fullName的值  
       // 初始读取调用一次，fullName所依赖的数据发生变化  
       get(){  
           return this.firstName + '-' + this.lastName  
        },  
       // 当fullName值被修改时调用（一般不修改）  
       set(value) {  
           console.log(value);  
        }  
    }  
}

computed计算属性简写方式

注意：只有确定不进行修改时使用简写方式！

computed: {  
    // 当确定计算属性不进行修改， 可以直接写函数形式  
    fullName(){  
        return this.firstName + '-' + this.lastName  
    }  
}  
//这里fullName函数直接充当get()

method

method直译就是方法的意思，顾名思义就是存放事件方法的地方，并挂载在当前vm上，通过this.方法名即可调用

watch

watch侦听属性，当侦听的属性发生变化时，handler函数自动调用，侦听属性两种写法：

在实例化时传入watch配置项
实例化结束，通过vm.$watch()

注意📢：侦听的属性必须存在（不存在也不会报错）

<h2>今天天气好{{info}}</h2>  
<button @click='changeWeather'>点击切换天气</button>

var vm = new Vue({  
    el:'#root'  
    data:{ //为模板提供数据  
        msg:'hello Vue!',  
        isHot: true  
    },
    // 事件回调
    methods: {  
        changeWeather() {  
            this.isHot = !this.isHot  
        }  
    },
    // 计算属性
    computed: {  
        //get()  
        info() {  
            return this.isHot?'炎热':'寒冷'  
        }   
    },  
    // 监听属性写法一  
    watch: {  
        isHot:{  
            //immediate为true直接调用handler函数  
            immediate: true, //isHot属性发生改变了 true undefined  
            handler(newValue, oldValue){  
                console.log("isHot属性发生改变了",newValue,oldValue);  
            }  
        }  
    }  
})  
//监听属性写法二  
vm.$watch('isHot',{  
    immediate: true, //isHot属性发生改变了 true undefined  
    handler(newValue, oldValue){  
        console.log("isHot属性发生改变了",newValue,oldValue);  
}  
})

深度监听

注意📢：Vue自身是可以监测多级结构的，但watch默认不可以！

watch侦听属性默认不能监测多级结构（对象内部），可以给watch添加deep属性即可监测多级结构（对象）

<h3>{{number.a}}</h3>  
<button @click="number.a++">点击a++</button>  
<h3>{{number.b}}</h3>  
<button @click="number.b++">点击++</button>

//data数据  
data:{ //为模板提供数据  
    msg:'hello Vue!',  
    isHot: true,  
    number:{  
        a:1,  
        b:1  
    }  
}  
  
//watch数据  
watch: {  
    // 侦听多级结构中某个属性的变化(麻烦) 
    'number.a':{  
        handler(newValue, oldValue){  
            console.log("a值改变了",newValue,oldValue);  
        }  
    },  
    number: {  
        deep:true,//开启深度侦听(推荐)
            handler() {  
            console.log('number值被改变了');  
        }  
        //此时不管点击a还是b，number都被改变  
    }  
}

侦听属性简写

简写前提：不需要 immediate 和 deep !

//完整写法  
isHot:{  
    //immediate为true时初始直接调用handler函数  
    immediate: true, //isHot属性发生改变了 true undefined  
    deep: true,
    handler(newValue, oldValue){  
        console.log("isHot属性发生改变了",newValue,oldValue);  
    }  
}  
  
// 简写(前提是不需要immediate和deep)  
isHot(newValue, oldValue){  
    console.log("isHot属性发生改变了",newValue,oldValue);  
}

computed和watch区别

computed能完成的功能watch都可以完成
watch能完成的功能computed不一定能完成（异步操作）