Vue3
Vue3
1 概述
概述
本小节主要是描述 Vue3 的知识内容。
本小节主要描述内容如下，分类参考官方文档，对一些概要简单描述如下，详细可参考官方文档或一些教程。
- 开始。
- 一些概念。如单文件组件、响应式 API、组合式 API。
- 快速上手。
- 目录结构。
- 基础。
- 创建一个应用。应用实例、根组件、挂载应用、应用配置、多个应用实例。
- 模板语法。
- Attribute 绑定。简写、布尔型 Attribute、动态绑定多个值。
- 使用 JavaScript 表达式。仅支持表达式、调用函数、受限的全局访问。
- 响应式基础
- 声明响应式状态
<script setup>。
reactive()。Reactive Proxy vs. Original、reactive() 的局限性。额外的 ref 解包细节。作为 reactive 对象的属性、数组和集合的注意事项、在模板中解包的注意事项。
- 声明响应式状态
- 计算属性。基础示例、计算属性缓存 vs 方法、可写计算属性、最佳实践。
- 类与样式绑定。
- 绑定 HTML class。绑定对象、绑定数组、在组件上使用，可以参考 透传 Attributes。
- 绑定内联样式。绑定对象、绑定数组、自动前缀、样式多值。
- 条件渲染。
v-if、v-else、v-else-if、<template> 上的 v-if、v-show、v-if vs. v-show、v-if 和 v-for。 - 列表渲染。
v-for、v-for 与对象、在 v-for 里使用范围值、<template> 上的 v-for、v-for 与 v-if、通过 key 管理状态、组件上使用 v-for、数组变化侦测、展示过滤或排序后的结果。 - 事件处理。监听事件
@click、内联事件处理器、方法事件处理器、在内联处理器中调用方法、在内联事件处理器中访问事件参数、事件修饰符、按键修饰符、鼠标按键修饰符。 - 表单输入绑定。
- 基本用法。文本、多行文本、复选框、单选按钮、选择器。
- 值绑定。复选框、单选按钮、选择器选项。
- 修复符。
.lazy、.number、.trim。 - 组件上的 v-model。
- 生命周期。
- 注册周期钩子、生命周期图示。
- 侦听器。基本示例（侦听数据源类型）、深层侦听器、即时回调的侦听器、watchEffect()、回调的触发时机、停止侦听器。
- 模板引用。访问模板引用、v-for 中的模板引用、函数模板引用、组件上的 ref。TODO 看得不是很懂，后续再研究下。
- 组件基础。定义一个组件、使用组件、传递 props、监听事件、通过插槽来分配内容、动态组件、DOM 模板解析注意事项。
- 深入组件。
- 注册。
- Props。
- 事件。
- 组件 v-model。
- 透传 Attributes。
- 插槽 Slots。插槽内容与出口、渲染作用域、默认内容、具名插槽、动态插槽名、作用域插槽。
- 依赖注入。
- 异步组件。
- 逻辑复用。
- 组合式函数。
- 自定义指令。
- 插件。
- 内置组件。
- Transition。
- TransitionGroup。
- KeepAlive。
- Teleport。
- Suspense。
- 应用规模化。
- 单文件组件。
- 工具链。
- 路由。
- 状态管理。
- 测试。
- 服务端渲染 (SSR)。
- 最佳实践。
- 生产部署。
- 性能优化。
- 无障碍访问。
- 安全。
单文件组件
Vue 的单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里，如下。
<script></script>
<template></template>
<style></style>
单文件组件的创建、使用可参考 Vue3 创建单文件组件(SFC)
选项式、组合式 API
官网上有关于这两个概念的描述，见 简介 API 风格。
以下是截取的一段内容，更多内容见官网资料。通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与 <script setup> 搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如，<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。
快速上手
快速搭建 Vue 应用。
create-vue 方式
create-vue 是 Vue 官方的项目脚手架工具。以下是官网上快速启动的示例，它会安装并执行 create-vue。
TIP
注意本文档编写时发现 Vue 版本为 3.3.4，官方已经内置 Vue 工具链为 Vite 了。
# 1 创建项目
npm create vue@latest
# 2 依次选择配置，等待创建成功
√ Project name: ... vue-project
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
Scaffolding project in E:\gitWsGitee\temp\vue-project...
Done. Now run:
cd vue-project
npm install
npm run dev
# 3 运行并验证
$ cd vue-project
$ npm install --registry=https://registry.npm.taobao.org
$ npm run dev
# 浏览器访问： http://127.0.0.1:5173/
vite 方式
官方最新版的 Vue 已经内置使用 Vite，如果想单独用 Vite 快速启动见 Vite 快速启动传送门。
目录结构
以下目录结构暂做参考，目录结构与版本有关系。
| 目录/文件 | 说明 |
|---|---|
| build | 项目构建(webpack)相关代码。 |
| config | 配置目录，包括端口号等。我们初学可以使用默认的。 |
| node_modules | npm 加载的项目依赖模块。 |
| src | 我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件。 |
| src/assets | 放置一些图片，如 logo 等。 |
| src/components | 目录里面放了一个组件文件，可以不用。 |
| src/App.vue | 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 |
| src/main.js | 项目的核心文件。 |
| src/index.css | 样式文件。 |
| static | 静态资源目录，如图片、字体等。 |
| public | 公共资源目录。 |
| test | 初始测试目录，可删除 |
| .xxxx 文件 | 这些是一些配置文件，包括语法配置，git配置等。 |
| index.html | 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。 |
| package.json | 项目配置文件。 |
| README.md | 项目的说明文档，markdown 格式 |
| dist | 使用 npm run build 命令打包后会生成该目录。 |
Vue 相关技术
vue-axios
@vue/cli-plugin-babel
vue-qrcode：二维码插件
vue-treeselect：多选组件
vue-clipboard2
vue-cnname-avatar
vue-cron
vue-echarts
vue-json-editor
vue-json-tree-view
vue-quill-editor
@vue/cli-service
vue-template-compiler
vue-video-player
- benz-amr-recorder