create-vue
create-vue是Vue官方新的脚手架工具，底层切换到了vite,为开发提供极速相应
使用create-vue
1.安装16.0或者更高版本的Node.js
2.npm init vue@latest指令会安装并执行create-vue
项目目录和关键文件
组合式API
Vue 3引入了组合式API（Composition API），这是一套全新的API，旨在解决大型组件逻辑复杂难以维护的问题，同时提供更灵活和可重用的代码组织方式。组合式API使得组件逻辑可以按照功能进行拆分，使得代码更加清晰、易于理解和维护。
setup
写法：如下图所示：
执行时机：在组件进行渲染之后会优先执行setup函数，如下周期图所示：
setup选项中写代码的特点：
如果在setup函数里声明的变量和方法，需要return出去才能够使用，如下图所示：
<script setup>语法糖
经过语法糖封装后简化了setup的使用，如下所示：
注意：在setup中的this不再指向组件实例了，而是指向undifined
reactive()
作用:接受对象类型数据的参数传入并且返回一个响应式对象
使用方法：
1.从vue包中导入reactive函数
2.在<script setup>中执行reactive函数并且传入类型为对象的参数，并使用变量接受响应式对象返回值
响应式对象可以影响视图的更新，如下案例所示：
但是reactive只能接受对象类型参数，不支持简单类型参数，针对于此推出了ref()
ref()
作用：接受简单类型或者对象类型的数据并且返回一个响应式对象
使用方法：
1.从vue包中导入ref函数
2.在<script setup>中执行ref函数并且传入初值，并使用变量接受响应式对象返回值
如下是一个ref使用案例：
reactive VS ref?
1.reactive不能处理简单类型的数据
2.ref参数类型支持更好但是必须通过.value访问修改
3.ref函数的内部实现依赖于reactive函数
computed计算属性函数
使用方式：
1.导入computed函数
2.执行函数在回调参数中return基于响应式数据做计算的值，用变量接收
如下是一个案例：
注意：计算属性应该是只读的
watch函数
作用：侦听一个或者多个数据的变化，数据变化的时候立刻执行回调函数
两个额外参数：1.immediate(立即执行) 2.deep(深度侦听)
使用方法：
- 侦听单个数据
- 1.导入watch函数
- 2.执行watch函数传入要侦听的响应式数据(ref对象)和回调函数
- 注意：watch第一个参数是不需要使用ref.value的，会自动处理
- 同时监听多个响应式数据的变化，不管哪个数据变化都需要执行回调
-
- immedite
- 说明：在侦听器创建的时候立即执行回调，响应式数据变化后继续执行回调
- deep
- 默认使用watch监听的ref对象是浅层监听的，直接修改嵌套的对象是不会触发回调执行的，需要开启deep(depp一旦开启会执行递归调用，所以一般不建议开启，建议使用精确监听)
- 精确监听对象的某个属性
- 那么怎么在不开启deep的情况下侦听对象的某个属性，可以把第一个参数也替换成回调函数，返回需要侦听的属性就行
周期函数
基本使用:
1.导入
2.执行函数，传入参数
注意：如果是多次调用，那么会在时机成熟的时候依次执行
组合式API下的组件数据向下传递
基本思想
1.父组件中给子组件绑定属性
2.子组件通过props选项接受
在Vue3中局部组件不需要注册就可以直接使用了
组合式API下的组件数据向上传递
基本思想
1.父组件中给子组件标签通过@绑定事件
2.子组件中通过$emit方法触发事件
模板引用
在vue2中通过ref标识获取真实的dom对象或者组件实例对象
vue3中使用方法
1.调用ref函数生成一个ref对象
2.通过ref表示绑定ref对象到标签，然后dom对象就会保存到ref对象.value中
defineExpose
默认情况下在<script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的，可以通过defineExpose编译宏指定哪些属性和方法允许访问
provide和inject
作用场景：顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信
使用方法：
1.在顶层组件使用provice函数提供数据
2.在底层组件使用inject函数获取数据
如下是一个小案例：
还可以传递方法：
