马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？立即注册
x
打包发布
目标：明白打包的作用
说明：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 函数。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 | 
