vue学习条记7
打包发布目标：明白打包的作用
说明：vue脚手架只是开发过程中，帮忙开发的工具，认真正开发完了 => 脚手架不参与上线
打包的作用：
将多个文件压缩合并成一个文件，语法降级，less sass ts 语法解析
打包命令
https://i-blog.csdnimg.cn/direct/059d458fd84a430d8fa99293b77ade2d.png
打包后，可以天生，欣赏器能够直接运行的网页 => 就是需要上线的源码！
命令：yarn build
效果：在项目标根目录会自动创建一个文件夹`dist`, dist中的文件就是打包后的文件，只需要放到服务器中即可。
配置：默认环境下，需要放到服务器根目录打开，如果希望双击运行，需要配置publicPath 配成相对路径
https://i-blog.csdnimg.cn/direct/f4dcf8452a9740ce9375133b443e51a8.png打包优化：路由懒加载
目标：配置路由懒加载，实现打包优化
说明：当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，如许就更加高效了。
步调1： 异步组件改造
https://i-blog.csdnimg.cn/direct/4774011d49a149d087c5885ef07c8ba6.png
步调2： 路由中应用
https://i-blog.csdnimg.cn/direct/fd7d7da748ac435695e5571d3d16dde6.png
Vue3的优势
https://i-blog.csdnimg.cn/direct/21d8880ee6d44a4286069c59c591cc64.png
Vue2 选项式 API vs Vue3 组合式API
https://i-blog.csdnimg.cn/direct/734106d472254b63a4bb1c6a9fe16c69.png
需求：点击按钮，让数字 +1
https://i-blog.csdnimg.cn/direct/28321260d4b946a48fcaad72a3ab1acc.png
高级软件
setup选项的写法和执行机会
高级软件人才培训专家https://i-blog.csdnimg.cn/direct/ed2afac802b24c1d96100335f42790c0.png
https://i-blog.csdnimg.cn/direct/f210e4f4c0f343dbbee4fb6ce76319a7.png
<script setup> 语法糖
原始复杂写法
https://i-blog.csdnimg.cn/direct/aacf016897ca4f468cd8b72a434f69ab.png
语法糖写法
https://i-blog.csdnimg.cn/direct/2ce8f573d63549acb9bb3255a5155e0a.png
https://i-blog.csdnimg.cn/direct/ee27581a0de8440283a9ef4616cc664e.png
reactive()
作用：担当对象范例数据的参数传入并返回一个相应式的对象
核心步调
1. 从 vue 包中导入 reactive 函数
2. 在 <script setup> 中执行 reactive 函数并传入范例为对象的初始值，并利用变量吸收返回值
https://i-blog.csdnimg.cn/direct/0c9ba4ebd3e4429a99a424d616822c62.png
ref()
作用：吸收简朴范例或者对象范例的数据传入并返回一个相应式的对象
核心步调：
1. 从 vue 包中导入 ref 函数
2. 在 <script setup> 中执行 ref 函数并传入初始值，利用变量吸收 ref 函数的返回值
https://i-blog.csdnimg.cn/direct/26cf2cc97e61475f9b998c2d692fad05.png
computed计算属性函数
计算属性根本头脑和Vue2的完全一致，组合式API下的计算属性只是修改了写法
核心步调：1. 导入computed函数
2. 执行函数 在回调参数中return基于相应式数据做计算的值，用变量吸收
https://i-blog.csdnimg.cn/direct/4e3828018fc74200aa06ec61f73ec8fb.png
watch函数
作用: 侦听一个或者多个数据的变化，数据变化时执行回调函数
俩个额外参数：1. immediate（立即执行） 2. deep（深度侦听）
基础利用 - 侦听单个数据
1. 导入watch函数
2. 执行watch函数传入要侦听的相应式数据(ref对象)和回调函数
https://i-blog.csdnimg.cn/direct/6902f0bf53ab40aa9695320021c07d0c.png
https://i-blog.csdnimg.cn/direct/903abe88c44b43639f817b0aaa2c2f19.png
immediate
说明：在侦听器创建时立即触发回调, 相应式数据变化之后继续执行回调
https://i-blog.csdnimg.cn/direct/598ae7c74589418aa0c4d0f97d3f799a.png
deep
默认机制：通过watch监听的ref对象默认是浅层侦听的，直接修改嵌套的对象属性不会触发回调执行，需要开启deep选项
https://i-blog.csdnimg.cn/direct/8228275ceff24c65a9d11266805c5ce5.png
Vue3的生命周期API （选项式 VS 组合式）
https://i-blog.csdnimg.cn/direct/6d7f2a79f8a74fa2b472662bf250556c.png
生命周期函数根本利用
1. 导入生命周期函数
2. 执行生命周期函数 传入回调
https://i-blog.csdnimg.cn/direct/d3ead641146c4c318f1600755c6f877c.png
执行多次
生命周期函数是可以执行多次的，多次执行时传入的回调会在机会成熟时依次执行
https://i-blog.csdnimg.cn/direct/5f6cace7e7cc467287464ee4e94bf3cb.png
组合式API下的父传子
根本头脑
1. 父组件中给子组件绑定属性
2. 子组件内部通过props选项吸收
https://i-blog.csdnimg.cn/direct/5af67f4032b1410ba5370c6cb769df14.png
defineProps 原理：就是编译阶段的一个标识，实际编译器解析时，碰到后会进行编译转换
https://i-blog.csdnimg.cn/direct/3a393d5f41a54ed3a8dbe0c32be18139.png
defineExpose()
默认环境下在<script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的，
可以通过defineExpose编译宏指定哪些属性和方法答应访问
https://i-blog.csdnimg.cn/direct/63449540993045dda1a66a42717b3f1d.png
Vue3.3新特性-defineOptions
在 Vue 3.3 中新引入了 defineOptions 宏。顾名思义，主要是用来定义 Options API 的选项。可以用
defineOptions 定义任意的选项， props, emits, expose, slots 除外（因为这些可以利用 defineXXX 来做到）
https://i-blog.csdnimg.cn/direct/5839a693fc204cfa90cb8e135b682af3.png
Vue3 中的 v-model 和 defineModel
在Vue3中，自定义组件上利用v-model, 相称于传递一个modelValue属性，同时触发 update:modelValue 变乱
我们需要先定义 props，再定义 emits 。其中有许多重复的代码。如果需要修改此值，还需要手动调用 emit 函数。
https://i-blog.csdnimg.cn/direct/35db616f683647e2b4965b1a4c56c7a8.png
https://i-blog.csdnimg.cn/direct/bc1d708b1f814558be493c4d4f33d9c8.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]