关于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 条评论
登录 后参与评论

相关文章

来自专栏Small Code

【Python】小谈numpy数组占用内存空间问题

之前跟同学讨论过numpy数组的占用空间大小问题,但是今天给忘了,又重新试验了一下,主要是利用sys模块的getsizeof函数,使用的版本是 Python3....

44310
来自专栏黑泽君的专栏

在64位系统下,指向int型的指针占的内存空间多大?

501
来自专栏xingoo, 一个梦想做发明家的程序员

Java程序员的日常 —— static的用法讲解实践

之前文章说过Java中static的作用,有朋友想看个例子。于是便抽空写了个小栗子 代码 package xing.test.thinking.chap5...

2087
来自专栏和蔼的张星的图像处理专栏

548. 两数组的交 II 排序+双指针

样例 nums1 = [1, 2, 2, 1], nums2 = [2, 2], 返回 [2, 2].

882
来自专栏北京马哥教育

Linux Shell 流程控制语句实例

linux shell 有一套自己的流程控制语句,其中包括条件语句(if),循环语句(for,while),选择语句(case)。下面我将通过例子介绍下,各个...

3677
来自专栏java学习

Java每日一练(2017/7/24)

本期题目: (单选题) 1、与InputStream流相对应的Java系统的“标准输入对象”是() A System.in B System.out C Sy...

3568
来自专栏吴裕超

ES6之模版字符串

  但是我们可以看到:这样的传统做法需要使用大量的“”(双引号)和 + 来拼接才能得到我们需要的模版。但是这样是十分不方便的。

631
来自专栏软件测试经验与教训

Python学习笔记(七)

3468
来自专栏Python攻城狮

动态语言-Python1.动态语言的定义

动态编程语言是高级程序设计语言的一个类别,在计算机科学领域已被广泛应用。它是一类在运行时可以改变其结构的语言:例如新的函数、对象、甚至代码可以被引进,已有的函数...

582
来自专栏Python

python2/3 中删除字典中value为空的键值对方法

只是在for循环中,相当于对链表的操作,它会自动调用next方法! 字典的迭代器会遍历它的键,在这个过程中,不能改变这个字典!不能删除、添加数据 要先记录要删...

1163

扫码关注云+社区