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

Posted 李初五

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于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!如果你不希望有缓存,请用方法来替代。

以上是关于关于vue的使用计算属性VS使用计算方法的问题的主要内容,如果未能解决你的问题,请参考以下文章

Vue—计算属性缓存VS方法以及侦听器的区别

VUE 计算属性 vs 侦听属性

Vue -- 监视属性watch VS 计算属性computed & 箭头函数和普通函数的this指向问题

Vue计算属性

vue2.0--计算属性

Vue 计算属性