17Vue - 计算属性(计算缓存 vs Methods)

简介: 17Vue - 计算属性(计算缓存 vs Methods)

你可能已经注意到我们可以通过调用表达式中的method来达到同样的效果:

HTML:

<p>Reversed message: "{{ reverseMessage() }}"</p>

JS:

// in component
methods: {
  reverseMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

不经过计算属性,我们可以在 method 中定义一个相同的函数来替代它。对于最终的结果,两种方式确实是相同的。

然而,不同的是计算属性是基于它的依赖缓存。计算属性只有在它的相关依赖发生改变时才会重新取值。这就意味着只要 message 没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。

这也同样意味着如下计算属性将不会更新,因为Date.now() 不是响应式依赖:

computed: {
  now: function () {
    return Date.now()
  }
}

相比而言,每当重新渲染的时候,method 调用总会执行函数。

我们为什么需要缓存?假设我们有一个重要的计算属性 A ,这个计算属性需要一个巨大的数组遍历和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter !如果你不希望有缓存,请用 method 替代。

目录
相关文章
|
1月前
|
缓存 JavaScript 前端开发
Vue.js计算属性:实现数据驱动的利器
Vue.js计算属性:实现数据驱动的利器
|
18小时前
|
缓存 监控 JavaScript
Vue.js中的计算属性 computed 与监听属性 watch深入探索
Vue.js中的计算属性 computed 与监听属性 watch深入探索
10 0
|
12天前
|
缓存 JavaScript
vue计算属性是什么 怎么选择?
vue计算属性是什么 怎么选择?
|
13天前
|
缓存 JavaScript
什么是vue的计算属性?为什么使用?怎么使用?举例说明
什么是vue的计算属性?为什么使用?怎么使用?举例说明
|
13天前
|
缓存 JavaScript 开发者
什么是vue的计算属性
什么是vue的计算属性
9 0
|
13天前
|
缓存 JavaScript
什么是Vue的计算属性
什么是Vue的计算属性
4 0
|
15天前
|
JavaScript
Vue模板语法、属性绑定、条件渲染的学习
Vue模板语法强调插值表达式需返回结果以显示。避免问题的方法是将逻辑处理放在JS中,不在模板内实现。Vue属性绑定使用`v-bind`(可简写为:)动态绑定类或ID,当值为null或undefined时自动移除。支持布尔类型和动态绑定多值。条件渲染包括`v-if`、`v-else`、`v-else-if`和`v-show`,其中`v-if`用于真值时渲染,`v-show`按条件显示,两者的区别在于频繁切换场景和渲染方式。
|
18天前
|
缓存 JavaScript 前端开发
Vue 3的事件监听缓存如何优化性能?
【5月更文挑战第31天】Vue 3的事件监听缓存如何优化性能?
15 1
|
25天前
|
JavaScript 前端开发
Vue : 监视属性
Vue : 监视属性
11 0
|
25天前
|
缓存 JavaScript
Vue: 事件修饰符, 键盘事件, 鼠标事件,计算属性
Vue: 事件修饰符, 键盘事件, 鼠标事件,计算属性
32 2