Vue.js 计算属性

计算属性

如果模板中的表达式过长,或逻辑复杂时,代码会变得臃肿甚至难以阅读和维护,此时应该使用计算属性。

所有的计算属性都以函数的形式写在 Vue 实例内的 computed 选项内,最终返回计算后的结果。
在一个计算属性里可以完成各种复杂的逻辑,包括运算、函数调用等,只要最终返回一个结果就可以。
计算属性还可以依赖多个 Vue 实例的数据。只要其中任一数据发生变化,计算属性就会重新执行,视图也会更新

getter 和 setter

每一个计算属性都包含一个 getter 和一个 setter 。
计算属性的默认用法是 getter 函数。当你需要时,也可以提供一个 setter 函数,当手动修改计算属性的值就会触发 setter 函数。
计算属性可以依赖其他计算属性和其他 Vue 实例的数据。

计算属性的缓存

调用 methods 里的方法也可以与计算属性起到同样的作用。
如果是调用方法,只要页面重新渲染,方法就会重新执行,页面不需要渲染,则不需要重新执行。
而计算属性,不管页面是否重新渲染,只要计算属性依赖的数据未发生变化,就永远不变。
使用计算属性还是 methods 取决于你是否需要缓存。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。 例:反转字符串: 该例子中声明了一个...
    机智小铛铛i阅读 6,124评论 0 1
  • 在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。例如...
    angelwgh阅读 304评论 0 0
  • 第一组:刘聪 JavaScript:(a==1 && a==2 && a==3)能输出true么?(转载) Ja...
    胡諾阅读 637评论 0 0
  • 计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子: 实...
    谁说我是小小云阅读 261评论 0 0
  • 计算属性 由上面的代码可以看出,双大括号里面的文本操作比较多,而且这样的形式可能会造成代码的冗余和繁复,所以vue...
    每木传情阅读 750评论 0 1

友情链接更多精彩内容