一、前言
学习完前面一章的内容，你基本就已经可以开始使用vue开发前端页面了。
本章内容为vue中的进阶语法，通过学习本章的语法内容，可以在一定程度上简化你的代码量、让你对vue框架理解的更加深入、学习使用一些更加高级的特性。
二、生命周期
如果你熟悉任何一门编程语言，我相信你对“生命周期”这个词并不陌生，它常常被用于描述语言中一个变量的存在范围。
vue中其实也差不多，只不过这里不再是变量，而是描述的“组件”。
前面我们就说过，vue是以组件为单位组织代码的，一个组件中就包含了html、js、css三种代码。
那么既然是组件，那当它被其它组件使用的时候，就会出现一系列状态：被创建、被加载、被更新、被卸载。
官网有张图详细描述了一个组件的全过程：
看着似乎有点多，但实际上在大部分情况下，我们用到的并不多。
从上图看得出来，一个vue组件总共有7种主状态。
- 从渲染器遇到一个组件开始
- 到初始化可选
api，该过程就有生命周期钩子setup与beforeCreate - 判断是否编译了这个模板（也就是vue组件），该过程有一个生命周期钩子
created - 渲染创建以及插入DOM节点，这一过程有一个
beforeMount生命周期钩子 - 挂载这个组件，也就是将这个组件正式放置到页面上，有一个
mounted生命周期钩子 - 重渲染修补状态，也就是当你更改组件中的标签内容时，有两个生命周期钩子：
beforeUpdate、updated - 卸载组件，也就是从页面上删除这个组件，有两个生命周期钩子：
beforeUnmount、unmounted
上面主要是理了一下这张图的逻辑，也就是你只需要看中间的部分就可以了，一个组件从被创建直到销毁，总共有7种状态。
然后这些组件状态在切换时，官方就提供了一些钩子函数，可以让我们在其中做一些事情。
所谓钩子函数，就是将这个函数挂在指定为位置，当满足条件后，这个函数就会被自动调用。
那么如何使用呢？这在vue3的组件化编程中很简单：
<script setup>
import { onMounted } from 'vue';
//当组件被挂载时调用
onMounted(()=>{
console.log('组件被挂载了！');
});
</script>
因为组件化编程中将所有功能都被封装成了单独的函数，所以你只需要在前面那些钩子函数名字添加一个on即可从vue中导出对应的生命周期钩子函数。
比如上面我就导出了一个最常用的钩子函数onMounted，即图中mounted生命周期钩子所在处。
为什么常用呢？因为它所处的位置刚好是DOM节点被创建且初始化之后被调用的。
DOM节点应该知道吧？形象的来说，就是你看到的
div那些标签。
也就是说，如果我们想要初始化一下数据到页面上，那就必须要得等DOM初始化完成，而这个钩子函数所处的位置就刚刚好。
比如还有beforeMount，其对应的函数就是onBeforeMount，它就是在DOM初始化之前被调用，如果你在这个钩子函数中试图操作DOM节点，那么必然会报错。
如何操作？比如使用js中的
queryselect等函数来查询节点，又或者使用vue中的ref变量绑定节点。这就是在操作节点。
其它都是类似的意思，这里就不再过多赘述了。
其使用方式就是向这些钩子函数中传入一个函数作为参数，之后这个函数就会在相应的时间节点被调用。
实际上，我们这里的script标签上的setup属性，就是前面图中的那个setup，只不过官方给我们简化了的。
如果你不写这个setup，那么其实也等价于下面这种代码：
<script>
import { onMounted} from 'vue';
export default {
setup(msg) {
const msg=ref('这是一个ref变量');
onMounted(() => {
console.log('组件被挂载了！');
});
},
};
</script>
可以看到，如果不用这个语法糖，代肉眼可见的变得复杂起来了。
因为我们所有的函数、变量都要写入export default{}中的setup函数中。
三、数据双向绑定
前面我们已经使用过属性绑定，会发现那真的很有用，可以实现动态修改标签属性的目的。
但那也只能实现变量到标签属性的单方向绑定，也就是只能通过变量的变化，然后反映到标签上。
而有时候我们也需要动态将标签属性的变化反应到变量上，最常见的就是input标签，它有一个value属性代表当前标签内部用户输入的值。
很多时候我们都是需要在用户输入内容后获取这个值的，如果是以前，我们只能通过js代码来获取这个属性值，但现在vue也给我们提供了方便语法，可以快捷实现这一功能。
vue提供了我们一个叫做v-model的指令就可以实现属性与变量双向绑定的功能：
<script setup>
import { ref } from 'vue';
const val=ref();
</script>
<template>
<input type="text" v-model="val">
</template>
使用方式并不难，你只需要使用vue提供的v-model指令让其等于一个响应式变量，就实现了双向绑定。
具体实现的效果就是，一旦你修改了响应式变量的值，input控件中的显示内容会实时发生变化。
同时当用户修改input变量中的值时，该响应式变量中的值也会实时变化，这便是双向绑定。
同时由于它默认会自动绑定标签中的value属性，所以无需你去指定。
甚至你还可以为它添加修饰符，就像前面的事件处理那样：
<input type="text" v-model.number="val">
共有三个修饰符：
-
lazy：默认情况下，v-model会在每次input事件后更新数据。你可以添加lazy修饰符来改为在每次change事件后更新数据： -
number：让用户输入自动转换为数字 -
trim：默认自动去除用户输入内容中两端的空格
除了input标签外，双向绑定的用法还可以用在其它“表单”标签上。
比如文本输入框也可以绑定：
<textarea v-model="val"></textarea>
还有复选框：
<input type="checkbox" v-model="checked" />
如果有多个复选框，可以自动将其结果放在一个列表中：
<template>
<div>Checked names: {{ checkedNames }}</div>
<input type="checkbox" value="Jack" v-model="checkedNames">
<input type="checkbox" value="John" v-model="checkedNames">
<input type="checkbox" value="Mike" v-model="checkedNames">
</template>
<script setup>
import { ref } from 'vue';
const checkedNames=ref([]);
</script>
还有单选框：
<template>
<input type="radio" value="One" v-model="picked" />
<input type="radio" value="Two" v-model="picked" />
<div>{{ picked }}</div>
</template>
<script setup>
import { ref } from 'vue';
const picked=ref();
</script>
以及选择器：
<template>
<div>Selected: {{ selected }}</div>
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</template>
<script setup>
import { ref } from 'vue';
const selected=ref();
</script>
等等等等，更详细的内容可以查看官网介绍：表单输入绑定
四、计算属性
前面提到的模板语法提到过，模板中是可以写表达式的：
<template>
{{ msg.substring(0,msg.lastIndexOf('W')).toLocaleLowerCase() }}
</template>
但这样写太过于复杂了，你一眼很难看出这里最后的结果是什么。
所以后面我们用了一个函数来代替这个过程：
