Vue.js的computed与watch的使用

最近在项目中使用到computed与watch,感觉要总结一波computed与watch。

computed

现在需要显示name数据，由lastName和firstName拼接而成
当直接使用data拼接：

<template>
    <div>
        <i>{{firstName + lastName}}</i>
    </div>
</template>

data(){
    return {
        firstName: 'ky',
        lastName: 'zon'
    }
}

这样写完觉得还好啊，任务完成！
可是如果我的name由firstName,secondName,thirdName.....组成呢？全写在胡须里？这就很冗余！我们要解耦！
当使用computed的话，可以这样搞：

<template>
    <div>
        <i>{{name}}</i>
    </div>
</template>

data(){
    return {
        firstName: 'ky',
        lastName: 'zon'
    }
}
computed: {
    name(){
        return this.firstName + this.lastName;
    }
}

复杂的数据处理可以放在js里。

watch

现在又有一个需求： 只要更新name数据，就执行一段复杂业务逻辑

data(){
    return {
        name: 'zonky'
    }
}

当然，如果我勤快又细心，每个地方更新name的时候我都这样搞：

this.name = '诸葛铁锤';
//此处为业务逻辑

可是这样的话，debug的时候我的耐心还撑得住么？
所以咱用watch：

watch: {
    name(newVal){
        //添加异步请求等复杂的业务逻辑
    }
}

此时name被监听，当其更新时，业务逻辑就会执行，当我们需要更新name时，只需要：

this.name = '诸葛铁锤';

computed与watch异同

同：都是起到对数据的依赖/监听作用,并进行相应的处理
异：computed是对复杂数据的计算，并基于依赖进行缓存；watch是监听数据的变化并完成复杂的业务逻辑

watch属性

上方watch监听的完整写法是：

watch: {
    name:{
        handler(newVal){
            //业务逻辑
        }
    }
}

watch中name对象有一个属性：immediate

watch: {
    name:{
        handler(newVal){
            //业务逻辑
        },
        immediate: true
    }
}

当immediate: true时，name在初始化的时候会执行handler方法,反之不执行

watch中name对象还有一个属性: deep
现在监听的name数据时基础类型数据，如果监听一个对象方法相同：

data(){
    return {
        name: {
            firstName: 'ky',
            lastName: 'zon'
        }
    }
},
watch: {
    name:{
        handler(newVal){
            //业务逻辑
        }
    }
},
methods: {
    test1(){
        this.name.firstName = '铁锤';
    },
    test2(){
        this.name = {};
    }
}

此时执行test2方法，handler方法会执行；而执行test1方法时，handler方法不会执行，因为此时watch监听不到name对象属性的变化；

watch: {
    name:{
        handler(newVal){
            //业务逻辑
        },
        deep: true
    }
}

如果像监听name对象的属性，可以使用watch中name对象的deep属性;deep: true时，name对象会被深度遍历，每个属性都加上监听器；
补充：对象与数组可以使用$set()更新数据触发监听响应；

--未完待续，持续学习--