vue计算属性和方法的区别

计算属性：

 

 1 <div id="example">
 2   <p>{{ now }}"</p>
 3 </div>
 4 
 5 <script>
 6 var vm = new Vue({
 7   el: '#example',
 8   data: {
 9     message: 'Hello'
10   },
11   computed: {
12     now: function () {
13       return Date.now()
14     }
15   }
16 })
17 </script>

方法：

 1 <div id="example">
 2   <p>{{ now() }}"</p>
 3 </div>
 4 
 5 <script>
 6 var vm = new Vue({
 7   el: '#example',
 8   methods: {
 9     now: function () {
10       return Date.now()
11     }
12   }
13 })
14 </script>
区别：
1·、两者的执行结果是完全相同的
2、计算属性是基于他们的依赖进行缓存的，只有在相关依赖发生改变时，他们才会重新求值，也就是说，只要他的依赖没有发生变化，那么每次访问的时候计算属性都会立即返回之前的计算结果，不再执行函数
3、每次触发重新渲染时，调用方法将总会再次执行函数
4、上方两个例子，计算属性将总会返回相同值，而方法则不会
 
posted @ 2019-08-29 11:22  前端—小白  阅读(1370)  评论(0)  编辑  收藏  举报