打包发布
目标:明白打包的作用
说明: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企服之家,中国第一个企服评测及商务社交产业平台。 |