为啥要在 vue.js 中计算属性？

Posted 2023-02-22

【中文标题】为啥要在 vue.js 中计算属性？

【英文标题】：Why computed property in vue.js?为什么要在 vue.js 中计算属性？

【发布时间】：2019-02-23 02:17:51

【问题描述】：

我是 vue.js 的初学者。使用计算属性而不是方法的原因是什么。为什么要问这个问题，因为计算属性和方法都做同样的事情

【问题讨论】：

Method vs Computed in Vue的可能重复

你可以阅读vuejs.org/v2/guide/computed.html。

【参考方案1】：

方法可以获取属性，需要手动调用，计算则不然。 此外，您无需在多次使用时克隆代码。将计算属性想成是您的附加逻辑的捷径。

在模板中加入过多的逻辑会使它们变得臃肿且难以维护。例如：

<div id="example">
   message.split('').reverse().join('') 
</div>

同样，使用计算属性：

<div id="example">
   reversedMessage 
</div>

Vue 代码：

var vm = new Vue(
  el: '#example',
  data: 
    message: 'Hello'
  ,
  computed: 
    // a computed getter
    reversedMessage: function () 
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    
  
)

区别

但我认为主要区别在于缓存。当您调用 method 5 次时，您将获得 5 次计算。另一方面，计算属性只计算一次（在更改时），然后返回一个缓存值。