Vue2.0计算属性-（4）

计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动更新。

首先来看看计算属性的使用(效果图)：

10-计算属性.gif

    

         
         
原始字符：{{msg}}
         
计算属性翻转字符：{{reverseMsg}}
    
    

其实计算属性能做的，methods属性和watch属性同样也能做，现在我们就来说说他们的区别：

computed 和methods 属性的区别：

• 当页面重新渲染（不是刷新）的时候，计算属性不会变化，直接读取缓存使用，适合较大量的计算和改变频率较低的属性，计算属性是基于它们的依赖进行缓存的
• 而method，就是当页面重新渲染的时候（页面元素的data变化，页面就会重新渲染），都会重新调用method

computed 和watch 属性的区别：

• 计算属性是计算属性，观察是观察。计算属性顾名思义就是通过其他变量计算得来的另一个属性，而观察watch是观察一个特定的值，当该值变化时执行特定的函数。例如分页组件中，我们可以检测页码执行获取数据的函数。
• 当你想要在数据变化响应时，执行异步操作或开销较大的操作，使用watch这是很有用的。

计算属性的写法有2种，一种是没有setter写法，一种是有setter的写法

没有setter的写法，性默认只有getter方法：

10-计算属性-没有setter.gif

有setter的写法:(注意，此setter和getter再vue的计算属性中的写法是set和get)

    

         
         
原始字符：{{msg}}
         
计算属性翻转字符：{{reverseMsg}}
    
    

10-计算属性-有setter.gif

计算属性getter不执行的情况：
   当包含计算属性的节点被移除，并且模板中其他地方没有再引用该属性时，那么对应的计算属性的getter方法不会执行。