vue.js计算属性 vs methods

计算属性：Vue.js 模板内的表达式非常便利，但是缺点就是只能用于简单的运算，如果模板中有太多的逻辑运算会让模板不堪重负且难以维护。恰恰计算属性可以处理复杂的逻辑运算，也就是说对于任何复杂逻辑你都应当使用计算属性。

1、计算属性基础列子

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4         <meta charset="UTF-8">
 5          <title></title>
 6          <script type="text/javascript"  src="vue.js"></script>
 7      </head>
 8  <body>
 9      <div id="id">
10          <span>{{message}}</span><br>
11          <span>{{reverseMessage}}</span><br>
12          <span>{{num}}</span><br>
13          <span>{{sum}}</span>
14      </div>
15  </body>
16  <script>
17        var vm = new Vue({
18            el: '#id',
19            data:{
20                message:'计算属性',
21                num:100
22            },
23            computed:{
24                reverseMessage: function () {
25                    return this.message.split('').reverse().join('')
26                },
27                sum:function(){
28                    return this.num + 100
29                    //return this.num = this,num+100    //绑定数据num同时也更新了
30                }
31            }
32        })
33      </script>
34  </html>

输出结果：

2、计算属性和Methods的比较

　　Methods也是实现计算属性相同的功能
　　计算属性是基于它们的依赖进行缓存的，也就是说计算属性只有在它相关依赖发生改变时才会重新求值，只要绑定数据没有发生改变，多次访问计算属性会立即返回之前的计算结果，而不必执行函数。
　　Methods只要发生重新渲染，methods就总会执行回调函数。相比而言如果遇到需要很大的开销逻辑运算时，使用计算属性比methods更有优势。因为计算属性具有缓存的功能，可以大大提高效率。

vue.js计算属性 vs methods

相关推荐