Vue的计算属性与监视属性

一、Vue计算属性

我们先来看一个例子：（需要实现的内容是在姓和名的输入框中输入字段后，下面拼接出全名）：

第一种实现方法：

    

        


        


        {{fullname()}}
    
    

效果展示：

 第二种实现方法：

    
    
    
    
    



    

        


        


        {{fullname}}
        {{fullname}}
        {{fullname}}
        {{fullname}}

    
    

上面的代码仔细看

 以为会调用四次fullname函数，但是实际只调用了一次，如果是第一种方法的话就会调用四次。因为计算属性自己有缓存机制。

总结计算属性：

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

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

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

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

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

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

5.备注：

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

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

如果只需要读取计算属性，可以采用下面的简写方式：

    

        


        


        {{fullname}}
        {{fullname}}
        {{fullname}}
        {{fullname}}

    
    

二、Vue监视属性

监视属性有两种写法

（1）写法1

    

        
今天天气很{{info}}
        切换按钮
    
    

（2）写法二

    

        
今天天气很{{info}}
        切换按钮
    
    

监视属性watch注意点:

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

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

（3）监视的两种写法：

1.new Vue时传入watch配置

2.通过vm.$watch监视

（3）深度监视

    

        

        
a的值为{{number.a}}
        执行a++
        

        
b的值为{{number.b}}
        执行b++
    
    

深度监视注意点：

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

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

备注：

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

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

（4）监视的简写形式

当watch里面的配置项只有handler的时候才可以用简写形式

简写形式一：

    

        
今天天气很{{info}}
        切换按钮
    
    

简写形式二：

    

        
今天天气很{{info}}
        切换按钮
    
    

三、计算属性与监视属性对比

用监视属性去实现前面那个姓和名拼接成全名的例子并且要额外执行一个输入之后1s才显示

    

        


        


        {{fullname}}
    
    

如果用计算属性写：

 这个部分就有问题，你的return返回的值是交给setTimeout的不是fullName，所以根本得不到计算属性的值就无法渲染。

计算属性与监视属性之间的区别：

（1）计算属性能完成的功能，监视属性都可以完成

（2）监视属性能完成的功能计算属性不一定能完成，例如监视属性可以进行异步操作。

两个重要的小原则：

（1）所有被Vue管理的函数最好写成普通函数，这样this的执行才是vm或者组件实例对象

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