初探vue3.0笔记

Vue 3 刚出来那会儿，社区里最大的误会之一就是：Vue 3 和 Vue CLI 3.x / 4.x 不是一回事。CLI 是脚手架工具的大版本号，Vue 3 是框架本身。装 CLI 4 默认还可能创建 Vue 2 项目，要看创建时的选项。这篇只记我当时「先把 Vue 3 项目跑起来」的第一步。

tips: 请注意区分vue3.0和vue cli 3.x/4.x

创建项目

国内网络装依赖慢，创建时可以直接指定淘宝镜像源：

vue create -r https://registry.npm.taobao.org vue-next-test

交互式向导里选 Manually select features，勾上 TypeScript、Router 等你需要的即可。我那次选了带 TS 的模板，创建成功后 npm run serve，浏览器能打开默认页就算过关。

和 Vue 2 + TS 的差别

从 Demo 来看，单文件组件 + TypeScript 的写法跟 Vue 2 时期差别不大：defineComponent、props 类型声明、还是熟悉的味道。真正大的变化在 Composition API、setup、响应式底层换成 Proxy 等，要深入用才会明显感觉到。第一遍搭项目不用急着全学，先跑通、改改 HelloWorld，再去看官方迁移指南更踏实。

未完待续

当时只记了创建步骤，后面关于 ref / reactive、setup 语法糖、和 Vue 2 混用之类的问题，打算在实际项目里踩了坑再补。如果你也是刚上手，建议：先分清 CLI 版本和 Vue 版本，再建一个最小项目跑起来，比光看文章有效。

从 Vue 2 迁到 Vue 3 时，不要只把 Options API 机械地改写成 setup()。Composition API 的价值在于把同一个功能的状态、计算值、副作用和操作收拢在一起，并在多个组件中通过 composable 复用。小组件继续使用 Options API 并没问题，真正需要重新设计的是全局状态、插件注册、v-model 和第三方组件库兼容性。升级前先列依赖清单和测试关键交互，比一次性重写更安全。

可用性说明：本文发布于 2020 年 6 月，距今已超过五年。文中涉及的软件版本、接口、下载地址、命令参数和操作界面可能已经发生变化，部分方案在当前环境下可能失效。请结合官方最新文档核对后再操作，生产环境使用前务必先行验证。

版权声明: 本文首发于 指尖魔法屋-初探vue3.0笔记（https://blog.thinkmoon.cn/post/881-notes-vue30-typescript-vue/） 转载或引用必须申明原指尖魔法屋来源及源地址！