一、前言
学习完前面一章的内容，你基本就已经可以开始使用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也给我们提供了方便语法，可以快捷实现这一功能。
