1.template
vue规定：每个组件对应的模板结构，需要定义到<template>节点中。在vue2中只能有一个根节点，在vue3中<template>节点中的DOM结构支持多个根节点
2.createApp
优点：功能逻辑复杂繁多情况下，各个功能逻辑代码组织在一起，便于阅读与维护；
缺点：需要有良好的代码组织能力与拆分逻辑能力
3.组合式API
4.setup
setup 函数是一个新的组件选项，作为组件中组合式API 的起点（入口）
setup 中不能使用 this，this 指向 undefined
setup函数只会在组件初始化的时候执行一次
setup函数在beforeCreate生命周期钩子执行之前执行
在setup中定义的属性与方法最后需要return出去
（1）引用reactive定义响应式数据
（2）ref函数——常用于简单数据类型定义为响应式数据
Ps:在修改值、获取值的时候，需要.value;在模板中使用ref申明的响应式数据，可以省略
（3）toRefs 函数-简化响应式对象
问题复现：如果我们想在模板中省略到state，直接书写name和age，你可能会想到，那我在return出去的时候把state中的属性解构出来不就好了
toRefs包裹处理
5.computed函数
使用步骤：
1.从vue框架中导入`computed`函数
2.在setup函数中执行computed函数，并传入一个函数，在函数中定义计算公式
3.把computed函数调用完的执行结果放到setup的return值对象中
6.watch 函数
作用：基于响应式数据的变化执行回调逻辑，和vue2中的watch的功能完全一致
1. 普通监听
2. 立即执行
3. 深度监听
使用步骤：
1. 从vue框架中导入`watch`函数
2. 在setup函数中执行watch函数开启对响应式数据的监听
3. watch函数接收三个常规参数
第一个参数为函数，返回你要监听变化的响应式数据
第二个参数为响应式数据变化之后要执行的回调函数
第三个参数为一个对象，在里面配置是否开启立刻执行或者深度监听
1）普通监听
2）开启立刻执行
watch的效果默认状态下，只有监听的数据发生变化才会执行回调，如果你需要在一上来的时候就立刻执行一次，需要配置一下`immediate`属性
3）开启深度监听
当我们监听的数据是一个对象的时候，默认状态下，对象内部的属性发生变化是不会引起回调函数执行的，如果想让对象下面所有属性都能得到监听，需要开启`deep`配置
4）更好的做法
使用watch的时候，尽量详细的表明你到底要监听哪个属性，避免使用deep引起的性能问题，比如我**仅仅只是想在state对象的age属性变化的时候执行回调**，可以这么写
7.生命周期函数
先从vue中导入以on打头的生命周期钩子函数
在setup函数中调用生命周期函数并传入回调函数
生命周期钩子函数可以调用多次
从Vue2转换到Vue3
这个方便的Vue2到Vue3的生命周期映射直接来自于Vue3 Composition API 文档，我认为这是一种最有用的方式来查看事情将如何变化，以及我们如何使用它们。
注意⚠️：
只能在当前组件setup中使用这些on开头的钩子函数
用法vue2的钩子函数几乎无异，使用时记得导入
可以和vue2钩子函数并用，先执行on开头的钩子函数
