Vue计算属性和监视属性

目录

计算属性computed

监事属性

深度监视

---

计算属性computed

计算属性:

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

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

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

• 1、初次读取时会执行一次。
• 2、当依赖的数据发生改变时会被在次调用

4、优势：与methods实现相比，内部有缓存机制(复用),效率更高，调试方便。

5、备注：

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

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

    
    
    
    





    姓:


    名:


全名:{{allName}}

运行结果 

 计算属性-天气案例

今天天气很{{info}}
    点击切换

监事属性

    
    
    
    




    今天天气很{{info}}
    点击切换

另一种写法

    vm.$watch('isHot',{
        // immediate是否立即执行
        immediate:true,
        //handler什么时候调用？当isHot发生改变时调用
        handler(newV, oldV){
            // console.log(Math.ceil(Math.random()*10))
            console.log("isHot被修改了，" + newV+"---" + oldV)
        }}
    )
    console.log(vm)

监事属性watch:

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

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

3、监视的两种写法

1. new Vue时传入watch配置
2. 通过vm.$watch监视

深度监视

    
    
    
    




b:{{number.a}}
    点击a的值加1
    b:{{number.b}}
    点击a的值加1

1、Vue中的watch默认不见时对象内部值的改变（一层）

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

备注：

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

2、使用watch是根据数据的具体结构，决定时候采用深度监测