VUE3【实用教程】（2024最新版）

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.ts
js 复制代码
```
app.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 的值发生改变时，会触发模板重新渲染。

html 复制代码

<span>Message: {{ msg }}</span>

{``{ }} 中还可以是

表达式
返回一个值的，无副作用（不会改变响应式变量）的函数
js 复制代码
```
{{ 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 应用的创建过程

创建 / 导入根组件

每个应用都需要一个"根组件"，其他组件将作为其子组件。
js 复制代码
```
import App from './App.vue'
```
通过 createApp 函数创建应用实例
js 复制代码
```
import { createApp } from 'vue'
```
js 复制代码
```
const app = createApp(App)
```
调用了 .mount() 方法挂载应用
html 复制代码
```

<div id="app"></div>
```
js 复制代码
```
app.mount('#app')
```
mount 的参数为一个实际的 DOM 元素或是一个 CSS 选择器字符串。
- 被挂载的元素不会被视为应用的一部分。
- mount 的返回值是根组件实例而非应用实例

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