关于vue的使用计算属性VS使用计算方法的问题
2017-09-28 10:43
686 查看
在vue中需要做一些计算时使用计算属性和调用methods方法都可以达到相同的效果,那么这两种使用方式的区别在哪里:
vue的官方文档里已经给出了解答
我们将同一个函数定义为一个方法而不是一个属性,对于最终结果,两者是一样的.
然而,不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要
这也同样意味着下面的计算属性将不再更新,因为
相比之下,每当触发重新渲染时,方法的调用方式将总是再次执行函数。
我们为什么需要缓存?假设我们有一个性能开销比较大的的计算属性 A,它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。
<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p>//计算属性 <p>Computed reversed message: "{{ reversedMessage }}"</p>//调用方法 </div>
var vm = new Vue({ el: '#example', data: { message: 'Hello' }, methods:{ reversedMessage: function () { // `this` points to the vm instance return this.message.split('').reverse().join('') } }, computed: { // a computed getter reversedMessage: function () { // `this` points to the vm instance return this.message.split('').reverse().join('') } } })
vue的官方文档里已经给出了解答
我们将同一个函数定义为一个方法而不是一个属性,对于最终结果,两者是一样的.
然而,不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要
message还没有发生改变,多次访问
reversedMessage计算属性会立即返回之前的计算结果,而不必再次执行函数。
这也同样意味着下面的计算属性将不再更新,因为
Date.now()不是响应式依赖:
computed: { now: function () { return Date.now() } }
相比之下,每当触发重新渲染时,方法的调用方式将总是再次执行函数。
我们为什么需要缓存?假设我们有一个性能开销比较大的的计算属性 A,它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。
相关文章推荐
- vue中的计算属性的使用和vue实例的方法示例
- vue计算属性的使用和vue实例的方法
- 关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
- Vue1.0学习总结(3)———vue1.0的生命周期、vue计算属性computed的使用、vue实例(vm)上方法总结、vue结合动画使用
- 关于form使用form.submit()提交的一个问题,提示form.submit不是对象的方法属性
- vue.js使用之计算属性与方法返回的差别
- 关于android中使用weight属性实现多个layou比例布局的计算方法
- vs中使用M_PI的问题及解决 角度转弧度&根据弧度计算圆周上点的坐标的方法
- CSDN上的一个问题贴(关于内部类在外部类静态方法中使用问题)
- VS 2005 中关于编译时使用那种字符集问题
- 关于使用runtimeStyle属性问题讨论文章
- 关于使用VS.Net2003调试器出现的问题及相关解决方法[转]
- IE中使用setAttribute方法设置属性的问题
- 关于使用dataAdapter.acceptChanges( )方法更新dataSet和数据库的问题
- vss6.0在集成vs net2005出现问题时候,check in 和check out使用方法两例
- XML中关于“使用元素还是属性”的问题
- 关于strcpy的问题,解释一下为什么VS中标准的方法不用memcpy实现
- 关于ASP.NET“操作必须使用一个可更新的查询”问题的解决方法
- 关于Javascript与表单结合时出现"对象不支持此属性或方法"的问题总结(不断更新中...)
- 关于.net中使用axmschart控件editcopy方法的问题!