5.Vue中的计算属性（compute）监视属性（watch），二者优点和对比

目录

计算属性（compute）

结合程序来看

运行结果

监视属性（watch）

代码

运行结果

监视的简写

compute和watch的区别

---

data中的数据就是属性

计算属性（compute）

        1.定义:通过自己已有的属性计算得来

        2.原理:底层结束Object.defineproperty方法提供的getter和setter

        3.get函数什么时候执行

            1.初次读取fullName的时候

            2.所依赖的数据发生变化的时候

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

        5.备注:

            1.计算属性最终会出现再vm上,直接读取即可

            2.如果计算属性要被修改,那必须写set函数去相应修改

结合程序来看

    

        姓: 
        

        名: 
        

        姓名: {{fullName}}
    
    

运行结果

监视属性（watch）

深度监视:

        (1):Vue中的watch默认不监测对象内部的值的改变(一层)

        (2):配置deep:true可以监测对象内部值改变(多层)

    备注:

        (1)Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以

        (2)使用watch时根据数据的具体结构,决定是否采用深度监视

代码

    

        
今天天气{{info}}
        切换天气
        

        
a的值是{{number.a}}
        a+1
        

        
a的值是{{number.b}}
        b+1

    
    

运行结果

监视的简写

    

        
今天天气{{info}}
        切换天气
    
    

compute和watch的区别

computed和wantch之间的区别:

            1.computed能完成的任务,watch都能完成

            2.watch能完成的任务,computed不一定能完成,例如:watch可以进行异步操作(eg:setTimeout)

        ⭐两个重要的原则:

            1.所被Vue管理的函数,最好写成普通函数,这样this指向的才是vm和组件实例对象

            2.所有不被Vue所管理的函数(定时器的回调函数,ajax的回调函数等),最好写成箭头函数

                这样this的指向才是vm 或者 组件实例对象

        姓:
        

        名:
        

        姓名:{{name}}