关于vue的使用计算属性VS使用计算方法的问题

 在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!如果你不希望有缓存,请用方法来替代。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏逸鹏说道

Python3 与 C# 扩展之~基础衍生

在线编程: https://mybinder.org/v2/gh/lotapp/BaseCode/master

1697
来自专栏Golang语言社区

go语言中的数组切片:特立独行的可变数组

初看go语言中的slice,觉得是可变数组的一种很不错的实现,直接在语言语法的层面支持,操作方面比起java中的ArrayList方便了许多。但是在使用了一段时...

2954
来自专栏SeanCheney的专栏

《利用Python进行数据分析·第2版》第8章 数据规整:聚合、合并和重塑8.1 层次化索引8.2 合并数据集8.3 重塑和轴向旋转8.4 总结

在许多应用中,数据可能分散在许多文件或数据库中,存储的形式也不利于分析。本章关注可以聚合、合并、重塑数据的方法。 首先,我会介绍pandas的层次化索引,它广泛...

4479
来自专栏cloudskyme

设计模式(3)-装扮你的类(装饰模式)

首先看看书上的例子吧!人穿衣服的例子! 类图就不画了,就是简单的类结构。 代码如下: #include <iostream> using namespace ...

2455
来自专栏深度学习与计算机视觉

数据结构-队列

队列的定义 在很多资料中,队列与栈往往一同出现,因为它与栈有很多相似的地方。队列是只允许在一端插入另一端删除的线性表,即一种先入先出(FIFO)的结构,队列有顺...

1796
来自专栏weixuqin 的专栏

数据结构学习笔记(特殊的线性表:栈与队列)

2619
来自专栏风口上的猪的文章

.NET面试题系列[10] - IEnumerable的派生类

IEnumerable分为两个版本:泛型的和非泛型的。IEnumerable只有一个方法GetEnumerator。如果你只需要数据而不打算修改它,不打算为集合...

582
来自专栏debugeeker的专栏

《coredump问题原理探究》Linux x86版7.6节 Map coredump例子

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xuzhina/article/detai...

442
来自专栏大数据和云计算技术

算法基础:优先队列

算法是基础,小蓝同学准备些总结一系列算法分享给大家,这是第四篇《优先队列》,非常赞!希望对大家有帮助,大家会喜欢! 前面系列文章: 归并排序 #算法基础#...

3136
来自专栏技术点滴

编译器构造

编译器构造 一、 编译器简介 前面谈到静态链接器构造的基本流程,最后提到所构造的链接器若要能正常工作的前提是需要构造一个能生成符合链接器输入文件格式的编译器,本...

1828

扫描关注云+社区