打包发布
目标：明确打包的作用
说明：vue脚手架只是开发过程中，协助开发的工具，当真正开发完了 => 脚手架不参与上线
打包的作用：
将多个文件压缩合并成一个文件，语法降级，less sass ts 语法解析
打包命令
打包后，可以生成，浏览器能够直接运行的网页 => 就是需要上线的源码！
命令：yarn build
结果：在项目的根目录会自动创建一个文件夹`dist`, dist中的文件就是打包后的文件，只需要放到服务器中即可。
配置：默认情况下，需要放到服务器根目录打开，如果希望双击运行，需要配置publicPath 配成相对路径
打包优化：路由懒加载
目标：配置路由懒加载，实现打包优化
说明：当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
步骤1： 异步组件改造
步骤2： 路由中应用
Vue3的优势
Vue2 选项式 API vs Vue3 组合式API
需求：点击按钮，让数字 +1
高级软件
setup选项的写法和执行时机
高级软件人才培训专家
<script setup> 语法糖
原始复杂写法
语法糖写法
reactive()
作用：接受对象类型数据的参数传入并返回一个响应式的对象
核心步骤
1. 从 vue 包中导入 reactive 函数
2. 在 <script setup> 中执行 reactive 函数并传入类型为对象的初始值，并使用变量接收返回值
ref()
作用：接收简单类型或者对象类型的数据传入并返回一个响应式的对象
核心步骤：
1. 从 vue 包中导入 ref 函数
2. 在 <script setup> 中执行 ref 函数并传入初始值，使用变量接收 ref 函数的返回值
computed计算属性函数
计算属性基本思想和Vue2的完全一致，组合式API下的计算属性只是修改了写法
核心步骤：1. 导入computed函数
2. 执行函数 在回调参数中return基于响应式数据做计算的值，用变量接收
watch函数
作用: 侦听一个或者多个数据的变化，数据变化时执行回调函数
俩个额外参数：1. immediate（立即执行） 2. deep（深度侦听）
基础使用 - 侦听单个数据
1. 导入watch函数
2. 执行watch函数传入要侦听的响应式数据(ref对象)和回调函数
immediate
说明：在侦听器创建时立即触发回调, 响应式数据变化之后继续执行回调
deep
默认机制：通过watch监听的ref对象默认是浅层侦听的，直接修改嵌套的对象属性不会触发回调执行，需要开启deep选项
Vue3的生命周期API （选项式 VS 组合式）
生命周期函数基本使用
1. 导入生命周期函数
2. 执行生命周期函数 传入回调
执行多次
生命周期函数是可以执行多次的，多次执行时传入的回调会在时机成熟时依次执行
组合式API下的父传子
基本思想
1. 父组件中给子组件绑定属性
2. 子组件内部通过props选项接收
defineProps 原理：就是编译阶段的一个标识，实际编译器解析时，遇到后会进行编译转换
defineExpose()
默认情况下在<script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的，
可以通过defineExpose编译宏指定哪些属性和方法允许访问
Vue3.3新特性-defineOptions
在 Vue 3.3 中新引入了 defineOptions 宏。顾名思义，主要是用来定义 Options API 的选项。可以用
defineOptions 定义任意的选项， props, emits, expose, slots 除外（因为这些可以使用 defineXXX 来做到）
Vue3 中的 v-model 和 defineModel
在Vue3中，自定义组件上使用v-model, 相当于传递一个modelValue属性，同时触发 update:modelValue 事件
我们需要先定义 props，再定义 emits 。其中有许多重复的代码。如果需要修改此值，还需要手动调用 emit 函数。
