Vue学习笔记:计算属性

使用函数的缺点

如果我们想要将数据经过转化后再显示,或者多个数据结合起来进行显示,一般可以直接在数据渲染或者数据绑定的时候书写表达式

如果表达式过于复杂,或者逻辑太多的时候,我们可以将其封装在函数里,写在 methods 选项里

而,使用函数的话,每次调用都会重新计算一次,对于不经常改变的数据,使用函数会特别影响性能

计算属性的简单使用

将数据经过处理再显示出来,我们可以使用计算属性computed:

计算属性是有缓存的,性能比直接用methods好

Vue学习笔记:计算属性_第1张图片

计算属性定义好之后,用法和普通的data里定义的属性一样

计算属性的复杂操作

函数是单向的,而计算属性可以有setter和getter,可以支持双向的

计算属性如果不指定,则默认只有getter,如果想要计算属性支持setter属性,需要分别定义getter和setter方法

计算属性的setter和getter:
Vue学习笔记:计算属性_第2张图片

~~~~~ END ~~~~~

你可能感兴趣的:(Vue学习笔记:计算属性)