加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-16 23:15:40 所属栏目:百科 来源:网络整理
导读:?在vue中需要做一些计算时使用计算属性和调用methods方法都可以达到相同的效果,那么这两种使用方式的区别在哪里: Original message: "{{ message }}" Computed reversed message: "{{ reversedMessage }}" Computed reversed message: "{{ reversedMessage }

?在vue中需要做一些计算时使用计算属性和调用methods方法都可以达到相同的效果,那么这两种使用方式的区别在哪里:

Original message: "{{ message }}" Computed reversed message: "{{ reversedMessage }}"Computed reversed message: "{{ reversedMessage }}"
vm = '#example''Hello' .message.split('').reverse().join('' reversedMessage: .message.split('').reverse().join(''

vue的官方文档里已经给出了解答

我们将同一个函数定义为一个方法而不是一个属性,对于最终结果,两者是一样的.

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

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

相比之下,每当触发重新渲染时,方法的调用方式将总是再次执行函数。

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读