【H2O2|全栈】Vue2（二）
目录
前言
开篇语
本系列博客主要讲述Vue2系列的基础语法，本期的内容为常用修饰符，计算属性，监听属性以及生命周期。
Vue的逻辑可能有些复杂，需要反复琢磨。与此同时，由于Vue2是基于JavaScript的，所以我们不要忘记基础的Web相关知识。
准备工作
软件：【参考版本】Visual Studio Code
插件（扩展包）：Open in browser, Live Preview, Live Server, htmltagwrap
第三方js库（框架）：【参考版本】Vue.js 2.7.9
浏览器版本：Chrome
浏览器插件：Vue.js devtools
系统版本： Win10/11
常用修饰符
v-model修饰符（3个）
在表单输入时，用户可能会在开头或结尾输入多余的空格（输入法误输入空格），这时候就需要去除这些空格。
为此我们可以在v-model后面进行链式操作，添加 .trim 修饰符以去除首尾空格。
<input type="text" v-model.trim="value"/>对于表单的输入值来说，它们默认都是字符串类型的，这样就会导致在进行求和运算时，参与计算的数字可能实际上是以字符串的形式进行了拼接操作。
<input type="text" v-model.trim="value1"/>
+
<input type="text" v-model.trim="value2"/>
=
{{value1+value2}}这里我们在两个表单中分别输入1和2，我们预期的求和结果是3，但是实际上算出来却是12。
所以，我们可以为v-model继续添加修饰符 .number ，将字符串类型转化为数字类型。
修饰符支持链式操作。
<input type="text" v-model.trim.number="value1" />
+
<input type="text" v-model.trim.number="value2" />
=
{{value1+value2}}由此一来，本例中的计算结果就正常了：
在上一步的计算例子中，我们发现输入的值实时在右侧更新了。有时我们不希望这种双向绑定实时刷新，而是在鼠标离开当前表单（失焦）时才更新，就可以使用懒加载 .lazy ，它的作用相当于表单的onchange事件。
<input type="text" v-model.trim.number.lazy="value1" />
+
<input type="text" v-model.trim.number.lazy="value2" />
=
{{value1+value2}}在懒加载之后，我们在输入的过程中，只要表单没有失焦，结果就不会更新。
事件修饰符（3个）
在Vue的方法中，使用$event来代表局部事件，event代表全局事件。
以点击事件为例，我们知道在嵌套的元素之间存在冒泡事件，比如下面的三个嵌套的正方形，每一个都绑定了点击事件，点击可以输出事件处理函数handlerClick()形参中的颜色：
<div style="width: 300px;height: 300px;background-color: red;"@click.stop="handlerClick('red')">
<div style="width: 200px;height: 200px;background-color: green;"@click.stop="handlerClick('green')">
<div style="width: 100px;height: 100px;background-color: yellow;"@click.stop="handlerClick('yellow')"></div>
</div>
</div>
在不阻止事件冒泡时，点击最靠里的黄色方块，触发了三个方块的点击事件。
我们可以添加 .stop 修饰符，阻止当前元素的冒泡事件（相当于event.stopPropagation）。
<div style="width: 300px;height: 300px;background-color: red;"@click.stop="handlerClick('red')">
<div style="width: 200px;height: 200px;background-color: green;"@click.stop="handlerClick('green')">
<div style="width: 100px;height: 100px;background-color: yellow;"@click.stop="handlerClick('yellow')"></div>
</div>
</div>此时再次点击黄色方块，就没有冒泡事件了。
与之类似的，我们还可以使用 .prevent 来阻止默认事件（相当于event.preventDefault），比如阻止超链接的默认跳转事件。
最后，如果想让一个事件在触发一次之后就失效，可以使用 .once ，相当于事件解绑。
计算属性
案例
在涉及计算的操作中，我们一般会使用Vue实例中的计算属性 computed 。通过视图中传来的数据的状态的改变带来属性的改变。
比如，在下面的案例中，输入框分别输入姓氏和名字，在右侧输出最后的姓名，输出框统一使用懒加载，且默认为单姓（复姓取首字）。
姓: <input type="text" v-model.lazy="lastName"> +
名: <input type="text" v-model.lazy="firstName"> =
姓名: {{lastName+firstName}}在data中保存lastName和firstName的值：
data: {
lastName: "",
firstName: ""
}现在，我们需要将姓名输出至一个input表单中，其中涉及计算，我们无法直接使用下面的形式来完成需求：
姓名: <input type="text" v-model.lazy="lastName+firstName">所以，我们需要使用计算属性。在computed中，设置fullName属性为全名，它的值为一个函数，用于返回姓氏和名字拼接的结果。
computed: {
fullName:function() {
const {firstName,lastName} = this;
return firstName + lastName;
}
}最后，在视图中以fullName将返回的结果传出，并该结果将缓存在fullName中。
姓名: <input type="text" v-model.lazy="fullName">get()和set()
目前，我们已经实现了从左侧到右侧的输出。现在，我们希望在右侧输入姓名，反向将其拆分至左侧的姓氏框和名字框。
直接修改左侧的值，发现右侧的值没有更改，检查运行，出现下面的语法错误。
这是因为computed中的属性值默认为get()函数，只能获取值而不能设置值。而此前我们在computed中的写法实际上完整的表述应当是下面的形式：
fullName: {
get() {
const { firstName, lastName } = this;
return firstName + lastName;
}
}如果想要实现fullName的拆解，我们还需要为它添加一个set()方法，该方法传入fullName修改之后的最新值——value。利用value，我们可以重新设置data中的数据值。
set(value) {
this.firstName = value.substr(0, 1);
this.lastName = value.substr(1);
}监听属性
监听属性（watch）并不是一个数值，而是一个监听器，实质是监听状态的变化。
在Vue实例的watch中，添加需要监听的数据作为方法名，比如姓氏（lastName），监听函数的两个形参curValue和preValue分别代表当前最新的数据和更新之前的数据。
watch: {
lastName(curValue, preValue) {
console.log("当前：", curValue, "更新前：", preValue);
}
}
案例
使用监听属性，我们同样也可以完成上述的姓名正反向拼接操作。
由于监听属性没有缓存，所以我们还需要在data中保存fullName的值。
data: {
lastName: "",
firstName: "",
fullName: ""
}这里我们需要监听三个值——lastName，firstName和fullName。在它们各自的监听函数中，我们不需要使用到更新前的值，因此我们只需要使用第一个形参curValue即可。
对于姓氏和名字而言，它们之间的状态修改是互相不影响的，所以我们需要分别让它们的curValue和另一半拼接，以此组成需要的全名，注意这种拼接之间的先后顺序。
lastName(curValue) {
this.fullName = curValue + this.firstName;
},
firstName(curValue) {
this.fullName = this.lastName + curValue;
},
fullName(curValue) {
this.lastName = curValue.substr(0, 1);
this.firstName = curValue.substr(1);
}初始化监听
与计算属性不同，如果给定了初始的计算参数，那么计算属性将会直接计算出结果，即初始化默认执行。而监听属性是默认不监听的。
比如说我们现在有一个数据msg，我们想要使用监听来查看它的值，但是我们发现监听方法没有被调用。
msg: {
handler(curValue, preValue) {
console.log(curValue, preValue);
}
}控制台输出情况：
如果想要监听属性也具有初始化功能，那么我们就不能再使用这种简略的函数写法，而是要将监听的属性作为属性名，然后单独为函数起一个名字放在该属性值的对象中。
在这个对象中，添加immediate属性，并将其设置为true，用来解决不能初始化监听的问题。
msg: {
handler(curValue, preValue) {
console.log(curValue, preValue);
},
immediate:true
}此时，我们发现控制台里执行了初始化的监听：
深度监听
对于引用类型的数据而言，我们使用一般的监听只能监听到栈内存中的内容（即地址），而无法监听到内部的数据变化，此时就需要使用到深度监听的功能。
与初始化监听类似，添加deep属性并设置为true，以实现深度监听。
生命周期
Vue的渲染过程分为四个阶段：
①创建Vue实例
②生成数据
③构建虚拟DOM模板template
④将虚拟DOM转为真实的DOM渲染到页面上
对于每个阶段来说，都有它们对应的生命周期函数。而生命周期函数本身也分为了两个阶段——加载阶段和更新阶段。此外，还可以进行Vue的销毁。
生命周期函数是Vue实例中的方法，与data，methods，computed，watch等并列。
加载阶段
在加载阶段中，Vue获取数据和DOM节点，涉及以下四个生命周期函数：
| 生命周期函数 | 加载阶段 | 备注 |
|---|---|---|
| beforeCreate | Vue数据创建之前 | / |
| created | Vue数据创建之后 | / |
| beforeMount | 虚拟DOM | Vue管理的状态暂时还没有解析 |
| mounted | 虚拟DOM已转为真实DOM | Vue管理的状态已经解析完毕 |
通常来说，在created函数中进行Ajax请求，以获取数据；在mounted函数中进DOM节点的获取。
更新阶段
在更新阶段中，状态在页面上进行更新涉及以下两个生命周期函数：
| 生命周期函数 | 加载阶段 | 备注 |
|---|---|---|
| beforeUpdate | 页面更新前 | / |
| updated | 页面更新后 | / |
销毁
在两个阶段完成之后，还可以对Vue进行销毁，涉及以下两个生命周期函数：
| 生命周期函数 | 加载阶段 | 备注 |
|---|---|---|
| beforeDestroy | 销毁前 | / |
| destroyed | 销毁后 | / |
在methods中的处理函数，如果使用this调用$destroy()方法，将会触发销毁。
结束语
本期内容到此结束。关于本系列的其他博客，可以查看我的Vue2专栏。
本系列的博客主要是记录学习经历，并总结阶段的知识点。全篇的操作过程由笔者完成并核验，在部分定义上有参考其他的内容。本身也是新手，多多包涵。
==期待与你在下一期博客中再次相遇==
——分解的【H2O2】
原文地址：https://blog.csdn.net/ZC13786305863/article/details/144378667
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！