vue的计算属性computed和监视属性watch的区别

总结：

计算属性computed：

                    1.定义：要用的属性不存在，要通过已有属性计算得来。                     2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。                     3.get函数什么时候执行？                                 (1).初次读取时会执行一次。                                 (2).当依赖的数据发生改变时会被再次调用。                     4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。                     5.备注：                             1.计算属性最终会出现在vm上，直接读取使用即可。                             2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。  监视属性watch：                     1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作                     2.监视的属性必须存在，才能进行监视！！                     3.监视的两种写法：                             (1).new Vue时传入watch配置                             (2).通过vm.$watch监视       　　　　4.深度监视：                         (1).Vue中的watch默认不监测对象内部值的改变（一层）。                         (2).配置deep:true可以监测对象内部值改变（多层）。                 备注：                         (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！                         (2).使用watch时根据数据的具体结构，决定是否采用深度监视。  

computed和watch之间的区别：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
这样this的指向才是vm 或 组件实例对象。

一，用计算属性完成姓名案例

 1 
 2 
 5     

 6         


 7         


 8         全名：{{fullName}}
 9 
10     
11 
12     
39 

二，用监视属性完成姓名案例

    

        


        


        全名：{{fullName}}