首页 > 其他 > 详细

vue计算属性和方法的区别

时间:2019-08-29 13:44:34      阅读:73      评论:0      收藏:0      [点我收藏+]

计算属性:

 

 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、上方两个例子,计算属性将总会返回相同值,而方法则不会
 

vue计算属性和方法的区别

原文:https://www.cnblogs.com/8023-CHD/p/11428671.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!