vue朝花夕拾02
vue朝花夕拾02
安知鱼复杂 data 的处理方式
我们知道，在模板中可以直接通过插值语法显示一些data 中的数据。
但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示;
- 比如我们需要对
多个 data 数据进行运算、三元运算符来决定结果、数据进行某种转化后显示; - 在模板中使用
表达式，可以非常方便的实现，但是设计它们的初衷是用于简单的运算; - 在模板中放入太多的逻辑会让
模板过重和难以维护; - 并且如果多个地方都使用到，那么会有大量重复的代码;
我们有没有什么方法可以将逻辑抽离出去呢?
- 可以，其中一种方式就是将逻辑抽取到一个
method中，放到 methods 的 options 中; - 但是，这种做法有一个直观的弊端，就是所有的 data 使用过程都会变成了一个
方法的调用; - 另外一种方式就是使用计算属性 computed;
认识计算属性 computed
什么是计算属性呢?
官方并没有给出直接的概念解释;
而是说:对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性;
计算属性将被混入到组件实例中
所有 getter 和 setter 的 this 上下文自动地绑定为组件实例;
计算属性的用法:
- 选项:computed
- 类型:{ [key: string]: Function | { get: Function, set: Function } }
那接下来我们通过案例来理解一下这个计算属性。
案例一:我们有两个变量:firstName 和 lastName，希望它们拼接之后在界面上显示;案例二:我们有一个分数:score当 score 大于 60 的时候，在界面上显示及格;
当 score 小于 60 的时候，在界面上显示不及格;案例三:我们有一个变量 message，记录一段文字:比如 Hello World某些情况下我们是直接显示这段文字;
某些情况下我们需要对这段文字进行反转;
我们可以有三种实现思路:
思路一:在模板语法中直接使用表达式;思路二:使用 method 对逻辑进行抽取;思路三:使用计算属性 computed;
案例实现思路
思路一的实现:模板语法
- 缺点一:模板中存在大量的复杂逻辑，不便于维护(模板中表达式的初衷是用于简单的计算);
- 缺点二:当有多次一样的逻辑时，存在重复的代码;
- 缺点三:多次使用的时候，很多运算也需要多次执行，没有缓存;
1
2
3
4
5
6
7
8
9
10
11
12
13<div id="app">
<!-- 插值语法表达式直接进行拼接 -->
<!-- 1.拼接名字 -->
<h2>{{ firstName + " " + lastName }}</h2>
<h2>{{ firstName + " " + lastName }}</h2>
<h2>{{ firstName + " " + lastName }}</h2>
<!-- 2.显示分数等级 -->
<h2>{{ score >= 60 ? '及格': '不及格' }}</h2>
<!-- 3.反转单词显示文本 -->
<h2>{{ message.split(" ").reverse().join(" ") }}</h2>
</div>思路二的实现:method 实现
- 缺点一:我们事实上先显示的是一个结果，但是都变成了一种方法的调用;
- 缺点二:多次使用方法的时候，没有缓存，也需要多次计算;
1
2
3
4
5
6
7
8
9
10
11
12
13<div id="app">
<!-- 插值语法表达式直接进行拼接 -->
<!-- 1.拼接名字 -->
<h2>{{ getFullname() }}</h2>
<h2>{{ getFullname() }}</h2>
<h2>{{ getFullname() }}</h2>
<!-- 2.显示分数等级 -->
<h2>{{ getScoreLevel() }}</h2>
<!-- 3.反转单词显示文本 -->
<h2>{{ reverseMessage() }}</h2>
</div>1
2
3
4
5
6
7
8
9
10
11methods: {
getFullname() {
return this.firstName + " " + this.lastName
},
getScoreLevel() {
return this.score >= 60 ? "及格": "不及格"
},
reverseMessage() {
return this.message.split(" ").reverse().join(" ")
}
}思路三的实现:computed 实现
注意:计算属性看起来像是一个函数，但是我们在使用的时候不需要加()，这个后面讲 setter 和 getter 时会讲到;
我们会发现无论是直观上，还是效果上计算属性都是更好的选择;
并且计算属性是有缓存的;1
2
3
4
5
6
7
8
9
10
11
12
13<div id="app">
<!-- 插值语法表达式直接进行拼接 -->
<!-- 1.拼接名字 -->
<h2>{{ fullname }}</h2>
<h2>{{ fullname }}</h2>
<h2>{{ fullname }}</h2>
<!-- 2.显示分数等级 -->
<h2>{{ scoreLevel }}</h2>
<!-- 3.反转单词显示文本 -->
<h2>{{ reverseMessage }}</h2>
</div>1
2
3
4
5
6
7
8
9
10
11
12
13
14computed: {
// 1.计算属性默认对应的是一个函数
fullname() {
return this.firstName + " " + this.lastName
},
scoreLevel() {
return this.score >= 60 ? "及格": "不及格"
},
reverseMessage() {
return this.message.split(" ").reverse().join(" ")
}
}
计算属性 vs methods
在上面的实现思路中，我们会发现计算属性和 methods 的实现看起来是差别是不大的，而且我们多次提到计算属性有缓存的。
接下来我们来看一下同一个计算多次使用，计算属性和 methods 的差异:
1 | <body> |
计算属性的缓存
这是什么原因呢?
这是因为计算属性会基于它们的依赖关系进行缓存;
在数据不发生变化时，计算属性是不需要重新计算的;
但是如果依赖的数据发生变化，在使用时，计算属性依然会重新进行计算;
计算属性的 setter 和 getter
计算属性在大多数情况下，只需要一个getter方法即可，所以我们会将计算属性直接写成一个函数。
但是，如果我们确实想设置计算属性的值呢?
这个时候我们也可以给计算属性设置一个setter 的方法;
1 | computed: { |
源码如何对 setter 和 getter 处理呢?
你可能觉得很奇怪，Vue 内部是如何对我们传入的是一个 getter，还是说是一个包含 setter 和 getter 的对象进行处理的呢?
事实上非常的简单，Vue 源码内部只是做了一个逻辑判断而已;
认识侦听器 watch
什么是侦听器呢?
开发中我们在 data 返回的对象中定义了数据，这个数据通过插值语法等方式绑定到 template中;
当数据变化时，template 会自动进行更新来显示最新的数据;
但是在某些情况下，我们希望在代码逻辑中监听某个数据的变化，这个时候就需要用侦听器 watch来完成了;
侦听器的用法如下:
- 选项: watch
- 类型: { [key: string]: string | Function | Object | Array}
侦听器案例
举个栗子(例子):
比如现在我们希望用户在input 中输入一个问题;
每当用户输入了最新的内容，我们就获取到最新的内容，并且使用该问题去服务器查询答案;
那么，我们就需要实时的去获取最新的数据变化;
1 | <body> |
侦听器 watch 的配置选项
我们先来看一个例子:
- 当我们点击按钮的时候会
修改 info.name的值; - 这个时候我们使用
watch 来侦听 info，可以侦听到吗?答案是不可以。
这是因为默认情况下，watch 只是在侦听 info 的引用变化，对于内部属性的变化是不会做出响应的:
- 这个时候我们可以使用一个
选项 deep进行更深层的侦听; - 注意前面我们说过 watch 里面侦听的属性对应的也可以是一个 Object;
还有另外一个属性，是希望一开始的就会立即执行一次:
- 这个时候我们使用
immediate 选项; - 这个时候无论后面数据是否有变化，侦听的函数都会有限执行一次;
1 | watch: { |
侦听器 watch 的其他方式
另外一个是 Vue3 文档中没有提到的，但是 Vue2 文档中有提到的是侦听对象的属性:
1 | "info.name": function(newValue, oldValue) { |
还有另外一种方式就是使用 $watch 的 API:
我们可以在 created 的生命周期(后续会讲到)中，使用 this.$watchs 来侦听;
第一个参数是要侦听的源;第二个参数是侦听的回调函数 callback;第三个参数是额外的其他选项，比如 deep、immediate;
1 | created() { |
