VUE3【实用教程】（2025最新版）_vue3最新版本-CSDN博客

本文链接：https://blog.csdn.net/weixin_41192489/article/details/140456957

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
【推荐】创建项目、创建并提交代码到远程仓库，安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码，提升开发效率的必要集成
https://blog.csdn.net/weixin_41192489/article/details/139983777

VUE3 基础

全局配置

捕获所有子组件上的错误

	app.config.errorHandler = (err) => {
	  /* 处理错误 */
	}

定义全局变量

// 定义全局变量 $WebName，在任意组件中都能直接使用
app.config.globalProperties.$WebName = 'EC编程俱乐部'

单文件组件 SFC

SFC的优点、缺点、使用场景、原理、使用预处理器、＜script setup＞语法详解、资源拆分
https://blog.csdn.net/weixin_41192489/article/details/140466279

新增的 CSS 样式语法

scoped 限定样式作用域为组件内，能影响子组件的根节点，不会影响子组件内部样式

<style>
/* 全局样式 */
</style>

<style scoped>
/* 局部样式 */
</style>

:deep() 样式深度选择器，可将样式渗透到子组件，在 scoped 中使用。

<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

:slotted() 插槽选择器，用于选中<slot/> 渲染出来的内容，在 scoped 中使用。

<style scoped>
:slotted(div) {
  color: red;
}
</style>

:global() 全局选择器，用于让样式应用到全局，在 scoped 中使用。

<style scoped>
:global(.red) {
  color: red;
}
</style>

v-bind() 函数，可将响应式变量绑定 CSS 样式实现动态样式

<script setup>
import { ref } from 'vue'
const theme = ref({
    color: 'red',
})
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>

CSS Modules
<style module> 标签会被编译为 CSS Modules ，组件可通过 $style 访问

<template>
  <p :class="$style.red">This should be red</p>
</template>

<style module>
.red {
  color: red;
}
</style>

module 的属性值可自定义 CSS Modules 的名称

<template>
  <p :class="classes.red">red</p>
</template>

<style module="classes">
.red {
  color: red;
}
</style>

组合式 API 中获取样式

import { useCssModule } from 'vue'

// 在 setup() 作用域中...
// 默认情况下，返回 <style module> 的 class
useCssModule()

// 具名情况下，返回 <style module="classes"> 的 class
useCssModule('classes')

声明响应式状态

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

路由管理 Vue Router

https://blog.csdn.net/weixin_41192489/article/details/140610904

状态管理 Pinia

状态持久化 pinia-plugin-persistedstate，异步Action，storeToRefs()，修改State的 $patch，$reset
https://blog.csdn.net/weixin_41192489/article/details/140093389

VUE3 进阶

VUE3 内置组件

无需注册，可直接使用

Transition

https://blog.csdn.net/weixin_41192489/article/details/140603887

TransitionGroup

https://cn.vuejs.org/guide/built-ins/transition-group.html

KeepAlive

https://blog.csdn.net/weixin_41192489/article/details/140605801

VUE3 内置 Hook

useId

用于生成每个应用内唯一的 ID

<script setup>
import { useId } from 'vue'

const id = useId()
</script>

<template>
  <form>
    <label :for="id">Name:</label>
    <input :id="id" type="text" />
  </form>
</template>

如果同一页面上有多个 Vue 应用实例，可以通过 app.config.idPrefix 为每个应用提供一个 ID 前缀，以避免 ID 冲突。

VUE3 拓展

vue3 中直接使用 JSX

https://blog.csdn.net/weixin_41192489/article/details/143787392

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() 方法挂载应用
```

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