VUE3 概述
Vue 2 已于 2023 年 12 月 31 日停止维护,请用 Vue 3
vue3 的优势
- 性能更好
- 体积更小
- 更好的 TS 支持
- 更好的代码组织
- 更好的逻辑抽离
- 更多新功能
vue3 升级的新功能
https://sunshinehu.blog.csdn.net/article/details/137834437
API 风格
vue3 有两种API 风格 :选项式 API 和 组合式 API
vue 2 即选项式 API,vue3 新增了组合式 API (Composition API ),为解决复杂业务逻辑而设计。
组合式 API 优势
- 更好的代码组织
- 更好的逻辑复用
- 更好的类型推导
应该使用组合式 API 还是选项式 API ?
- 不建议共用,会引起混乱
- 小型项目、业务逻辑简单,用 Options API 选项式 API
- 中大型项目、逻辑复杂,用 Composition API 组合式 API
搭建开发环境
官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official
https://blog.csdn.net/weixin_41192489/article/details/136752790
应用配置
- 捕获所有子组件上的错误
src/main.tsapp.config.errorHandler = (err) => { /* 处理错误 */ }
在这里插入代码片
VUE3 基础
单文件组件 SFC
SFC的优点、缺点、使用场景、原理、使用预处理器、<script setup>语法详解、资源拆分
https://blog.csdn.net/weixin_41192489/article/details/140466279
声明响应式状态
ref,reactive,toRef(),toRefs() 等
https://blog.csdn.net/weixin_41192489/article/details/138234529
文本插值 {{ }}
响应式变量 msg 通过 {{ }}
在模板中渲染( 解释为纯文本 ),当 msg 的值发生改变时,会触发模板重新渲染。
<span>Message: {{ msg }}</span>
{{ }}
中还可以是
表达式
返回一个值的,无副作用(不会改变响应式变量)的函数
{{ formatDate(date) }}
计算属性 computed
https://blog.csdn.net/weixin_41192489/article/details/140517202
指令 v-
https://blog.csdn.net/weixin_41192489/article/details/140473239
生命周期
生命周期钩子 vs 生命周期选项 vs 缓存实例的生命周期
https://blog.csdn.net/weixin_41192489/article/details/137813685
面试技巧:在回答有哪些生命周期时,附带主动说出各自生命周期的使用场景。
侦听器 watch
自动侦听 watchEffect(),$watch,手动停止侦听器
https://blog.csdn.net/weixin_41192489/article/details/137930356
组件
父子组件传值,自定义事件,插槽,动态组件等
https://blog.csdn.net/weixin_41192489/article/details/138502548
状态管理 Pinia
状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch
,$reset
https://blog.csdn.net/weixin_41192489/article/details/140093389
VUE3 进阶
渲染函数 & JSX
https://cn.vuejs.org/guide/extras/render-function.html
自定义元素
https://cn.vuejs.org/guide/extras/web-components.html#vue-and-web-components
VUE3 拓展
vue3 中借助 tsx 使用 JSX
https://sunshinehu.blog.csdn.net/article/details/128584413
VUE3 原理
vue 应用的创建过程
创建 / 导入根组件
每个应用都需要一个“根组件”,其他组件将作为其子组件。import App from './App.vue'
通过 createApp 函数创建应用实例
import { createApp } from 'vue'
const app = createApp(App)
调用了 .mount() 方法挂载应用
<!-- index.html 中用于挂载 vue 应用的元素 --> <div id="app"></div>
app.mount('#app')
mount 的参数为一个实际的 DOM 元素或是一个 CSS 选择器字符串。
- 被挂载的元素不会被视为应用的一部分。
- mount 的返回值是根组件实例而非应用实例
MVVM、响应式、模板编译、虚拟节点 vDom、diff 算法
https://blog.csdn.net/weixin_41192489/article/details/137124469
Proxy 实现响应式
https://sunshinehu.blog.csdn.net/article/details/138497769
vue3 比 vue2 快的原因
https://blog.csdn.net/weixin_41192489/article/details/137953238
vue3 与 vue 2 的 diff 算法的区别
- Vue2 的 updateChildren 是双端比较,Vue3 的 updateChildren 增加了“最长递增子序列” (更快 )
- Vue3 增加了 patchFlag、静态提升、函数缓存等
h 函数
https://sunshinehu.blog.csdn.net/article/details/128575335
手写 vue3
- 手写 vue3 的 ref,reactive 和 watchEffect
https://sunshinehu.blog.csdn.net/article/details/139598940 - 自定义 v-model
https://sunshinehu.blog.csdn.net/article/details/139473076
VUE3 性能优化
- 渲染列表时加 key
- 及时销毁自定义事件、DOM 事件
- 合理使用异步组件
- 使用服务端渲染 SSR
- webpack 中使用 production,打包时自动删掉调试代码
- 前端通用的性能优化,如图片懒加载等
https://blog.csdn.net/weixin_41192489/article/details/136497854
VUE3 提效
vscode 快捷生成 vue3 模板
https://sunshinehu.blog.csdn.net/article/details/140006775
自动路由 unplugin-vue-router
https://sunshinehu.blog.csdn.net/article/details/140007831
全局布局 vite-plugin-vue-layouts
https://sunshinehu.blog.csdn.net/article/details/140016698
自动导入框架方法 unplugin-auto-import
https://sunshinehu.blog.csdn.net/article/details/140018292
自动注册组件 unplugin-vue-components
https://sunshinehu.blog.csdn.net/article/details/140019854
使用 CSS 框架 UnoCSS
https://sunshinehu.blog.csdn.net/article/details/140034188
使用 VueUse 工具库
https://sunshinehu.blog.csdn.net/article/details/140121033
VUE3 封装 HOOK
组合式 API 通过仿 react 中的 hook 实现逻辑复用,流程如下:
- 抽离逻辑代码到一个函数
- 函数命名约定为 useXxxx格式 (React Hooks 也是 )
- 在 setup 中引用 useXxx 函数
实战范例:
- useTitle
https://sunshinehu.blog.csdn.net/article/details/139838689 - useLocation
https://sunshinehu.blog.csdn.net/article/details/139486731 - useMousePosition
https://blog.csdn.net/weixin_41192489/article/details/137875217
VUE3 封装组件
VUE3 实战