vue2计算属性和监视属性

一、计算属性

1. 定义：要用的属性不存在，要通过已有属性计算得来

2. 原理：底层借助了Object.defineproperty方法提供的getter和setter

3. get函数什么时候执行？

   （1）初次读取时会执行一次

   （2）当依赖的数据发生改变时会被再次调用

4. set函数什么时候执行？

   当计算属性被修改时

5. 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便

6. 备注：

   （1）计算属性最终会出现在vm上，直接读取使用即可

   （2）如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

computed:{
    fullName:{
        get(){
            return this.firstName + '-' + this.lastName
        },
        set(value){
            const arr = value.split('-')
            this.firstName = arr[0]
            this.lastName = arr[1]
        }
    }
}

二、监视属性

1. 当被监视的属性变化时，回调函数自动调用，进行相关操作

2. 监视的属性必须存在才能进行监视

3. 监视的两种写法：

   （1）new Vue时传入watch配置

   （2）通过vm.$watch监视

watch:{
    isHot:{
        immediate: true //初始化时让handler调用一下
        handler(newValue,oldValue){
            //当isHot发生改变时，handler调用
        }
    }
}

vm.$watch('isHot',{
    immediate: true,
    handler(newValue,oldValue){
        
    }
})

深度监视：

（1）Vue中的watch默认不监测对象内部值的改变（一层）

（2）配置deep：true可以监测对象内部值改变（多层）

备注：

（1）Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以

（2）使用watch时根据数据的具体结构，决定是否采用深度监视

data:{
    numbers: {
        a: 1,
        b: 1
    }
},
watch:{
    //监视多级结构中某个属性的变化
    'numbers.a':{
        handler(){
            
        }
    }，
    //监视多级结构中所有属性的变化
    numbers:{
        deep: true,
        handler(){
            
        }
    }
}

简写形式：

isHot(newValue,oldValue){
    console.log('isHot被修改了',newValue,oldValue)
}

三、watch对比computed

computed和watch之间的区别：

1. computed能完成的功能，watch都可以完成
2. watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作

两个重要的小原则：

1. 所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象
2. 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm或组件实例对象