文章目录
计算属性computed
1.认识计算属性
我们知道,在模板中可以直接通过插值语法显示一些data中的数据。
但是在某些情况,我们可能需要对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示;
-
比如我们需要对多个data数据进行运算、三元运算符来决定结果、数据进行某种转化后显示;
-
在模板中使用表达式,可以非常方便的实现,但是设计它们的初衷是用于简单的运算;
-
在模板中放入太多的逻辑会让模板过重和难以维护;
-
并且如果多个地方都使用到,那么会有大量重复的代码;
我们有没有什么方法可以将逻辑抽离出去呢?
-
可以,其中一种方式就是将逻辑抽取到一个method中,放到methods的options中;
-
但是,这种做法有一个直观的弊端,就是所有的data使用过程都会变成了一个方法的调用;
-
另外一种方式就是使用计算属性computed;
那么什么是计算属性呢?
-
官方并没有给出直接的概念解释;
-
而是说:对于任何包含响应式数据的复杂逻辑,你都应该使用计算属性;
-
计算属性将被混入到组件实例中 , 所有 getter 和 setter 的 this 上下文自动地绑定为组件实例;
计算属性的用法:
-
选项:computed
-
类型:
{ [key: string]: Function | { get: Function, set: Function } }
那接下来我们通过案例来理解一下这个计算属性。
2.案例实现
我们来看三个案例:
案例一:我们有两个变量:firstName和lastName,希望它们拼接之后在界面上显示;
案例二:我们有一个分数:score
-
当score大于60的时候,在界面上显示及格;
-
score小于60的时候,在界面上显示不及格;
案例三:我们有一个变量message,记录一段文字:比如Hello World
-
某些情况下我们是直接显示这段文字;
-
某些情况下我们需要对这段文字进行反转;
我们可以有三种实现思路:
思路一:在模板语法中直接使用表达式;
思路二:使用method对逻辑进行抽取;
思路三:使用计算属性computed;
实现思路一:模板语法
思路一的实现:模板语法
-
缺点一:模板中存在大量的复杂逻辑,不便于维护(模板中表达式