51工具盒子复杂 data 的处理方式 {#复杂-data-的处理方式}
我们知道，在模板中可以直接通过插值语法显示一些data 中的数据。
但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示;
- 比如我们需要对
多个 data 数据进行运算、三元运算符来决定结果、数据进行某种转化后显示; - 在模板中使用
表达式，可以非常方便的实现，但是设计它们的初衷是用于简单的运算; - 在模板中放入太多的逻辑会让
模板过重和难以维护; - 并且如果多个地方都使用到，那么会有大量重复的代码;
我们有没有什么方法可以将逻辑抽离出去呢?
- 可以，其中一种方式就是将逻辑抽取到一个
method中，放到 methods 的 options 中; - 但是，这种做法有一个直观的弊端，就是所有的 data 使用过程都会变成了一个
方法的调用; - 另外一种方式就是使用计算属性 computed;
认识计算属性 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 11|methods: { 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 14|computed: { // 1.计算属性默认对应的是一个函数 fullname() { return this.firstName + " " + this.lastName }, scoreLevel() { return this.score >= 60 ? "及格": "不及格" }, reverseMessage() { return this.message.split(" ").reverse().join(" ") } }|
计算属性 vs methods {#计算属性-vs-methods}
在上面的实现思路中，我们会发现计算属性和 methods 的实现看起来是差别是不大的，而且我们多次提到计算属性有缓存的。
接下来我们来看一下同一个计算多次使用，计算属性和 methods 的差异:
|------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <body> <div id="app"> <!-- 1.methods --> <h2>{{ getFullname() }}</h2> <h2>{{ getFullname() }}</h2> <h2>{{ getFullname() }}</h2> <!-- 2.computed --> <h2>{{ fullname }}</h2> <h2>{{ fullname }}</h2> <h2>{{ fullname }}</h2> <!-- 修改name值 --> <button @click="changeLastname">修改lastname</button> </div> <script src="../lib/vue.js"></script> <script> // 1.创建app const app = Vue.createApp({ // data: option api data() { return { firstName: "kobe", lastName: "bryant", }; }, methods: { getFullname() { console.log("getFullname-----"); return this.firstName + " " + this.lastName; }, changeLastname() { this.lastName = "why"; }, }, computed: { fullname() { console.log("computed fullname-----"); return this.firstName + " " + this.lastName; }, }, }); // 2.挂载app app.mount("#app"); </script> </body> |
计算属性的缓存 {#计算属性的缓存}
这是什么原因呢?
这是因为计算属性会基于它们的依赖关系进行缓存;
在数据不发生变化时，计算属性是不需要重新计算的;
但是如果依赖的数据发生变化，在使用时，计算属性依然会重新进行计算;
计算属性的 setter 和 getter {#计算属性的-setter-和-getter}
计算属性在大多数情况下，只需要一个getter方法即可，所以我们会将计算属性直接写成一个函数。
但是，如果我们确实想设置计算属性的值呢?
这个时候我们也可以给计算属性设置一个setter 的方法;
|------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | computed: { // 语法糖的写法 // fullname() { // return this.firstname + " " + this.lastname // }, // 完整的写法: fullname: { get: function() { return this.firstname + " " + this.lastname }, set: function(value) { const names = value.split(" ") this.firstname = names[0] this.lastname = names[1] } } }, |
源码如何对 setter 和 getter 处理呢? {#源码如何对-setter-和-getter-处理呢}
你可能觉得很奇怪，Vue 内部是如何对我们传入的是一个 getter，还是说是一个包含 setter 和 getter 的对象进行处理的呢?
事实上非常的简单，Vue 源码内部只是做了一个逻辑判断而已;
认识侦听器 watch {#认识侦听器-watch}
什么是侦听器呢?
开发中我们在 data 返回的对象中定义了数据，这个数据通过插值语法等方式绑定到 template中;
当数据变化时，template 会自动进行更新来显示最新的数据;
但是在某些情况下，我们希望在代码逻辑中监听某个数据的变化，这个时候就需要用侦听器 watch来完成了;
侦听器的用法如下:
- 选项: watch
- 类型: { [key: string]: string | Function | Object | Array}
侦听器案例 {#侦听器案例}
举个栗子(例子):
比如现在我们希望用户在input 中输入一个问题;
每当用户输入了最新的内容，我们就获取到最新的内容，并且使用该问题去服务器查询答案;
那么，我们就需要实时的去获取最新的数据变化;
|---------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <body> <div id="app"> <h2>{{message}}</h2> <button @click="changeMessage">修改message</button> </div> <script src="../lib/vue.js"></script> <script> // Proxy -> Reflect // 1.创建app const app = Vue.createApp({ // data: option api data() { return { message: "Hello Vue", info: { name: "why", age: 18 }, }; }, methods: { changeMessage() { this.message = "你好啊, 李银河!"; this.info = { name: "kobe" }; }, }, watch: { // 1.默认有两个参数: newValue/oldValue message(newValue, oldValue) { console.log("message数据发生了变化:", newValue, oldValue); }, info(newValue, oldValue) { // 2.如果是对象类型, 那么拿到的是代理对象 // console.log("info数据发生了变化:", newValue, oldValue) // console.log(newValue.name, oldValue.name) // 3.获取原生对象 // console.log({ ...newValue }) console.log(Vue.toRaw(newValue)); }, }, }); // 2.挂载app app.mount("#app"); </script> </body> |
侦听器 watch 的配置选项 {#侦听器-watch-的配置选项}
我们先来看一个例子:
- 当我们点击按钮的时候会
修改 info.name的值; - 这个时候我们使用
watch 来侦听 info，可以侦听到吗?答案是不可以。
这是因为默认情况下，watch 只是在侦听 info 的引用变化 ，对于内部属性的变化是不会做出响应的:
- 这个时候我们可以使用一个
选项 deep进行更深层的侦听; - 注意前面我们说过 watch 里面侦听的属性对应的也可以是一个 Object;
还有另外一个属性 ，是希望一开始的就会立即执行一次:
- 这个时候我们使用
immediate 选项; - 这个时候无论后面数据是否有变化，侦听的函数都会有限执行一次;
|------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | watch: { // 默认watch监听不会进行深度监听 // info(newValue, oldValue) { // console.log("侦听到info改变:", newValue, oldValue) // } // 进行深度监听 info: { handler(newValue, oldValue) { console.log("侦听到info改变:", newValue, oldValue) console.log(newValue === oldValue) }, // 监听器选项: // info进行深度监听 deep: true, // 第一次渲染直接执行一次监听器 immediate: true }, "info.name": function(newValue, oldValue) { console.log("name发生改变:", newValue, oldValue) } } |
侦听器 watch 的其他方式 {#侦听器-watch-的其他方式}
另外一个是 Vue3 文档中没有提到的，但是 Vue2 文档中有提到的是侦听对象的属性:
|---------------|----------------------------------------------------------------------------------------------------|
| 1 2 3 | "info.name": function(newValue, oldValue) { console.log("name发生改变:", newValue, oldValue) } |
还有另外一种方式就是使用 $watch 的 API: 我们可以在 created 的生命周期(后续会讲到)中，使用 this.$watchs 来侦听;
第一个参数是要侦听的源;第二个参数是侦听的回调函数 callback;第三个参数是额外的其他选项，比如 deep、immediate;
|-------------------|-------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 | created() { this.$watch("message", (newValue, oldValue) => { console.log("message数据变化:", newValue, oldValue) }, { deep: true }) } |
