vue计算属性computed使用注意事项(有缓存)

当我们在模板中来显示一份经过对数据项进行复杂计算之后的结果时,我们有两种解决方案:

(1)计算属性

(2)函数

应该如何选择?

(1)methods定义函数,如果在模板中使用,每使用一次,就相当于调用了一次,处理逻辑会重新执行。

(2)computed定义计算属性,如果在模板中使用,使用多次,但是如果依赖的数据不发生改变,计算属性对应的函数不会重新执行。

(3)计算属性会做缓存,提高渲染的性能。

结论:

  • 计算属性有缓存,提高渲染性能。
  • 如果在页面上需要用到 对现有的数据进行加工得到新数据,则时要使用计算属性
  • 想要给计算属性赋值, 则需要使用set方法

注意事项:计算属性和data一样,都需要设置return,当没有输出结果时,需要排查是不是return漏掉了

你可能感兴趣的:(vue.js)