关于vue的使用计算属性VS使用计算方法的问题
2024-03-23 12:21:02
在vue中需要做一些计算时使用计算属性和调用methods方法都可以达到相同的效果,那么这两种使用方式的区别在哪里:
<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！如果你不希望有缓存，请用方法来替代。
最新文章
- PHP用单例模式实现一个数据库类
- Fiddler进行模拟Post提交数据，总为null解决方式
- AfxMessageBox和MessageBox区别
- VMware中linux硬盘空间不足的解决方法
- 问题解决——开启Guest后仍无法共享打印机
- 阿里云 CentOS6.5 ssh连接慢的解决方案
- json和字符串转换
- freebsd 显示中文
- jstl标签库基础教程及其使用代码
- SAP-Basic：使用SCC1时提示 TA263“集团被集团副本锁定用于输入”
- jQuery 第一阶段 学习使用总结
- 使用JavaCV/OpenCV抓取并存储摄像头图像
- 针对iOS10的各种问题的解决方法
- [LeetCode] Find Bottom Left Tree Value 寻找最左下树结点的值
- 【CTF 攻略】CTF比赛中关于zip的总结
- 在Unity中实现小地图（Minimap）
- 利用data-src属性 更换图片
- QinQ 简介
- maven：Fatal error compiling: 无效的目标 发行版: 1.8 -> [Help 1]
- Linux之清理linux内存cache