Vue2.0计算属性-（4）

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

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

10-计算属性.gif

<body>
    <div id="app">
         <input type="text" v-model="msg">
         <p>原始字符：{{msg}}</p>
         <p>计算属性翻转字符：{{reverseMsg}}</p>
    </div>
    <script>
         new Vue({
             el:'#app',
             data:{
                 msg:'Hello'
             },
             //vue的计算属性
             computed:{
                 reverseMsg(){
                     //返回翻转后的字符串，当msg变化后reverseMsg会跟着变化
                     return this.msg.split('').reverse().join('')
                 }
             }
         })
    </script>
</body>

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

computed 和methods 属性的区别：

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

computed 和watch 属性的区别：

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

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

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

 <script>
         new Vue({
             el:'#app',
             data:{
                 msg:'Hello'
             },
             //vue的计算属性
             computed:{
                  //默认这是getter方法
                 reverseMsg(){
                     //返回翻转后的字符串,这个返回值就是变量reverseMsg的值
                     return this.msg.split('').reverse().join('')
                 }
             }
         })
 </script>

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

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

<body>
    <div id="app">
         <input type="text" v-model="msg">
         <p>原始字符：{{msg}}</p>
         <p>计算属性翻转字符：{{reverseMsg}}</p>
    </div>
    <script>
         var vueObj =new Vue({
             el:'#app',
             data:{
                 msg:'Hello'        
             },
             //vue的计算属性
             computed:{
                 reverseMsg:{
                     get(){
                         //返回翻转后的字符串,这个返回值就是变量reverseMsg的值
                        return this.msg.split('').reverse().join('')
                     },
                     set(newValue){
                         this.msg = newValue
                     }
                 }
             }
         })
    </script>
</body>

10-计算属性-有setter.gif

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

Vue2.0计算属性-（4）

推荐阅读更多精彩内容