周陆军博客

Appearance

On this page

拓展阅读 ​

存档一些会用到的链接，以及本文档的更新记录，方便读者阅读新内容。

官方文档 ​

只罗列 Vue 3.0 相关的官网，有中文版的优先都放中文版。

名称官网文档
Vue 32022 新版（预览），2021 旧版
Vue Composition API2022 新版（预览），2021 旧版
Vue Router与 Vue 3 匹配的 Router 4 的文档
Vuex与 Vue 3 匹配的 Vuex 4 的文档
Pinia点击访问
Vue CLI点击访问
Vite点击访问

教程工具 ​

可能会用到的一些教程或者工具。

常用的 Web API 类型查询 ​

在 DOM 元素与子组件 一节有提及到如何对 DOM 元素定义 TS 类型，拿出来放这里更方便查阅。

点击阅读：文档对象模型

当然其实不止于 DOM，所有的 Web API 都有自己的类型接口，可以通过 MDN 文档查阅。

点击阅读：Web API

TypeScript入门教程 ​

最近发现的一本好书，从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript ，可以帮你更快熟悉 TS 开发。

点击阅读：TypeScript 入门教程

深入理解TypeScript ​

一本挺不错的 TS 学习书籍，我自己是在京东打折的时候买的纸质书，不过也有个在线版，可以进行在线阅读，也可以去购买纸质版支持下作者 / 译者。

点击阅读：深入理解TypeScript

翻墙梯子Shadowfly ​

虽然是个付费梯子，不过我用了 2 年多了，很稳定，年卡折合下来每个月大概 10 块钱，一杯奶茶钱，如果遇到速度慢了就在客户端上更新一下配置就恢复了，目前没出现过故障。

有 Windows / MacOS / Linux / iOS / Android 多平台的客户端支持。

官网注册：点击注册，注册登录后可以下载客户端和一键同步配置。

程序员做菜教程 ​

哈哈哈这个和编程没有太多关系，不过你有兴趣也可以看看，也是我写的一些作品。

从 2021 年底陆续开始维护这个菜谱栏目，终于有一些像模像样的作品沉淀了，你可以在这里了解一些关于如何下厨烹饪的菜谱和教程，这是来自一名从小就学做饭的程序员的原创经验。

详情查看：cooking-cookbook

更新记录 ​

由于平时也比较忙，都是利用碎片时间整理的文档，习惯勤备份，因此 commit 记录比较多，而且有些提交记录跟内容也无关，比如之前为了提高访问速度而更新的 CDN 配置。

考虑到后面还会不定期更新内容，所以我翻了一下之前跟朋友的微信聊天记录，在这里简单记录一下大版本的更新节点，当文档有再次更新的时候，方便读者们查阅。

2022-05-03 ​

更新了 “升级与配置” 一章的部分内容：

  1. 更新了使用 Create Preset 创建项目的说明，现在可以通过 --template 选项来指定模板创建，例如：
bash
# 全局安装
npm install -g create-preset

# 将使用 `vue3-ts-vite` 模板创建一个名为 `hello-vue3` 的项目
preset init hello-vue3 --template vue3-ts-vite
  1. 配合 1 的更新，相应的增加了 Hello Vue3 一节
  2. 配合 @vue/cli 5.x 版本的命令行交互，更新了 使用 @vue/cli 创建项目 的内容
  3. 更新了 调整 TS Config 部分的内容，由于现在通过各类脚手架创建的 TypeScript 项目都自带了该文件，所以这部分内容移除了之前的配置参考，仅保留 paths 的配置提醒

2022-04-30 ​

最近有时间，所以对内容做了一大波更新，主要是补充了在开始开发 Vue 项目之前的一些基础知识点，当然 Vue 相关的内容也做了一些新增或者完善。

  1. 增加了全新的一章 “起步准备” ，面向对前端工程化开发不太熟悉的开发者，包含了以下内容：

  2. 在 “升级与配置” 一章里，增加了以下内容：

  3. 在 “单组件的编写” 一章里，增加了以下内容：

    • 响应式数据 设计上的变化
    • 增加了 指令 一节的内容，主要讲解如何在 Vue 3 开发自定义指令
    • 增加了 插槽 一节的内容

  4. 在 “路由的使用” 一章里，增加了以下内容，整理了一些常见的部署问题原因以及解决方案：

  5. 在 “插件的使用” 一章里，对 “本地插件” 作了进一步的细化讲解：

2022-04-20 ​

更正了 watch API 在 监听选项之 deep 部分内容的错误，并增加了如何检测特例的用法，感谢 @zcc0329 的反馈！

2022-04-10 ​

重写了单组件关于 数据的监听 这一节的内容，因为在写 Pinia 的订阅功能的时候，有很多跟 watch 相关联的知识点，发现之前这部分内容写的比较简单，所以完善了一下。

2022-04-07 ​

补充了昨天新增的关于 Pinia 订阅 state 部分的一些内容。

2022-04-06 ​

  1. 创建基于 Vite 的 Vue 3 项目增加了一些内容：

    • 增加了使用 Create Vue 创建 Vite 项目的说明
    • 使用 Create Preset 创建的 vue3-ts-vite 预设项目，使用 Pinia 代替 Vuex

  2. 补充了 Pinia 的部分内容：

2022-04-04 ​

先跟大家说声抱歉，在 2022-02-09 的更新里说要写这部分内容，结果因为现实里的一些事情还有工作比较忙，现在借着假期才得以继续更新。

增加了 全局状态的管理 一章，主要是面向 Vue 3 全新的状态管理工具 Pinia 展开，里面的大部分内容也加入了和 Vuex 的对比。

虽然可以归入 组件之间的通信 里，但 Pinia 作为被官方推荐在 Vue 3 项目里作为全局状态管理的新工具，写着写着我觉得还是单独开一章来写会更方便阅读和理解。

2022-03-04 ​

把 Algolia 的搜素功能申请下来了，看看文档的搜索体验会不会比较好（搜索框在页面的右上角）。

2022-02-28 ​

升级了文档的程序版本，加入了 Dark Mode 暗黑模式的支持，默认跟随系统模式进行适配，可以在右上角的 “主题切换” 按钮手动切换主题。

2022-02-09 ​

  1. 优化了 升级与配置 一章，配合 2022-02-07 Vue 3 成为默认版本带来的调整变化，主要改动如下：

  2. 在 高效开发 一章开头的 WARNING 改成了 TIP ，里面提到的功能在最新版的 Vue 下发挥稳定，后续如果有实验性的 API 再单独标记。

  3. 把原先演示命令里的 @next 版本都改成了 @latest ，现在不需要指定 next 就能使用 Vue 3 了。

  4. 更新了 官方文档 里面的链接说明，因为各个官网在 2022-02-07 都上线了新版本，更换了新地址。

  5. 在 组件之间的通信 里加入了 Pinia 的介绍，不过暂时没有写实践记录（还没有时间哈哈哈），欢迎先自行体验，这是一个官方推荐的适合 Vue 3 的状态管理工具，因为它更加面向 Composition API 的编程方式（至少在 Vuex 5 推出之前，建议用来代替 Vuex 4）。

  6. 改了一下文档名称：《Vue3.0学习教程与实战案例》 --> 《Vue 3 入门指南与实战案例》，其他原先使用 Vue 3.0 叫法的地方，后面也会陆续改成 Vue 3 了。

2022-01-20 ​

  1. 更新了 cnpm 的用法，原因是旧的 cnpm 源即将下线，需要使用新的域名啦！（感谢 @alleluya-young 在 #135 的反馈！）

  2. 添加了 pnpm 的用法说明，目前开源社区越来越流行使用 pnpm ，对大型项目管理也有好处，值得了解和体验。

2021-12-05 ​

由于离第一次执笔到现在有了差不多一年的时间，当时的前言信息有些陈旧，重新写了一下 前言 。

另外经过 2021 年的开发实践，很多地方我又有了新的认知，打算在接下来的时间里，我会再继续抽空把各部分的内容再精细化一下，把以前可能写的比较简单的部分，或者没有写进来的一些功能点，都再做一次完善。

2021-11-16 ​

重写了 数据的计算 一节，之前对于计算数据的介绍，描述上确实有点难以理解，而且有点简单带过，所以重新写了这部分内容，感谢读者 @superficial 的反馈！

2021-10-07 ​

补充了 全局编译器宏 的配置说明，本来很久前就想写的，一直偷懒，国庆结束前补充进来啦！

2021-08-17 ​

更新了 3.2.0 版本新增的一些知识点：

  1. 增加了 使用 v-bind 动态修改 style 功能说明，同时结合上下文知识点补充了 动态绑定 CSS 一节

  2. 增加了 CSS Modules 一节的内容

  3. 增加了 useCssModule 一节的内容

2021-08-16 ​

  1. 更新了 深度操作符 的内容，原有的 API 已被废弃，请注意使用新写法

  2. 补充了几个拓展阅读链接到 教程工具 里

2021-07-28 ​

迎接 Vue 3.2.0 的新版本内容，对 script-setup 做了较多的调整。

目前 3.2 还处于 Beta 阶段，不过从这个版本开始，script-setup 脱离实验性阶段，正式进入 Vue 3.0 的队伍，本次的更新内容较多，很多测试阶段的 API 被移除或者修改，如果之前有用过 script-setup ，建议先简单看我之前的博客，了解本次的一些变更：

Vue3.0最新动态：script-setup定稿 部分实验性API将弃用

2021-03-31 ​

  1. 调整了 使用全局 API 一节的内容

原因是原来推荐的 const { proxy } = getCurrentInstance() 的方案，在 TS 新版本校验下，使用成本非常高，原来的代码不做多层判断的情况下已经无法正常运行，所以按照目前的 “最佳实践” 重新更新了这一节。

  1. 新增了一节 全局 API 的替代方案

由于 Vue 3.0 的有意为之，这个 “最佳实践” 实际上用起来也挺繁琐（在官网和 GitHub 对此都有说明，不推荐使用），所以补充了这一节内容。

2021-03-23 ​

对 DOM 元素与子组件 一节增加了 TS 类型的定义说明，以及编译失败的原因说明及解决方案补充，非常感谢 @aierong 的反馈和支持。

2021-03-21 ​

增加了 高效开发 一章，将记录一些提高 Vue 3.0 开发效率的内容，面像对 Vue 3.0 已上手，想提高开发效率的同学。

本次更新了 script-setup 一节的内容。

2021-01-21 ​

增加了 组件之间的通信 一章的内容。

2020-12-18 ​

本文档的第一个版本上线，完成了 升级与配置 、 单组件的编写 、 路由的使用 、 插件的使用 等章节的编写。

2020-10-01 ​

国庆期间开始开荒 Vue 3.0，陆陆续续打了不少笔记，业余时间着手整理成文档。