前言：
开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情
复杂data的处理方式
在模板中可以直接通过插值语法显示一些data中的数据。
- 但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示；
- 我们有没有什么方法可以将逻辑抽离出去呢？
- 可以，其中一种方式就是将逻辑抽取到一个method中，放到methods的options中；
- 但是，这种做法有一个直观的弊端，就是所有的data使用过程都会变成了一个方法的调用；
- 另外一种方式就是使用计算属性computed；
什么是计算属性呢？
- 对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性；
- 计算属性将被混入到组件实例中
- 所有 getter 和 setter 的 this 上下文自动地绑定为组件实例；
- 计算属性的用法：
- 选项：computed
- 类型：{ [key: string]: Function | { get: Function, set: Function } }
computed实现
- 注意：计算属性看起来像是一个函数，但是我们在使用的时候不需要加()，这个后面讲setter和getter时会讲到；
- 我们会发现无论是直观上，还是效果上计算属性都是更好的选择；
- 并且计算属性是有缓存的；
<template id="my-app">
<h2>{{ fullName }}</h2>
<h2>{{ result }}</h2>
<h2>{{ reverseMessage }}</h2>
</ template>
computed: {
fullName() {
return this.firstName + this.lastName ;
},
result() {
return this.score >= 60? "及格" : "不及格";
},
rever seMessage() {
return this.message.split(" ").reverse().join("");
}
},
- 计算属性 vs methods
- 我们发现计算属性和methods的实现看起来是差别是不大的，而算属性有缓存的
计算属性的缓存
- 这是什么原因呢？
- 这是因为计算属性会基于它们的依赖关系进行缓存；
- 在数据不发生变化时，计算属性是不需要重新计算的；
- 但是如果依赖的数据发生变化，在使用时，计算属性依然会重新进行计算；
计算属性的setter和getter
- 计算属性在大多数情况下，只需要一个getter方法即可，所以我们会将计算属性直接写成一个函数。
- 但是，如果我们确实想设置计算属性的值呢？
- 这个时候我们也可以给计算属性设置一个setter的方法；
