Vue2 vs Vue3

今天我们来看看Vue3有哪些新特性，与Vue2相比有哪些不兼容，以及现在Vue3配套的开发工具。

快速体验Vue3

如果你没有使用过Vue3，那么可以通过下面的几种方式，来快速的体验Vue3：

• 通过 CDN：<script src="https://unpkg.com/vue@next"></script>

• Codepen 上的浏览器试验田

• CodeSandbox 上的浏览器内沙盒

• 通过脚手架 Vite：

  npm init vite hello-vue3 -- --template vue 
  # 或 yarn create vite hello-vue3 --template vue
  

• 通过脚手架 vue-cli：

  npm install -g @vue/cli 
  # 或 yarn global add @vue/cli
  vue create hello-vue3
  # 选择 vue 3 preset
  

值得注意的新特性

• 组合式 API (composition-api)
• Teleport
• fragments片段
• 触发组件自定义事件选项
• 来自 @vue/runtime-core 的 createRenderer API，用于创建自定义渲染器
• <script setup> 语法糖
• 单文件组件状态驱动的 CSS 变量 (<style> 中的 v-bind)
• SFC <style scoped> 现在可以包含全局规则或只针对插槽内容的规则
• Suspense 实验性API

非兼容的变更

下面列出了从 2.x 开始的非兼容的变更：

全局 API

• 全局 Vue API 已更改为使用应用程序实例
• 全局和内部 API 已经被重构为支持 tree-shake

模板指令

• 组件上 v-model 用法已更改，以替换 v-bind.sync
• <template v-for> 和非 v-for 节点上的 key 用法已更改
• 在同一元素上使用的 v-if 和 v-for 优先级已更改
• v-bind="object" 现在排序敏感
• v-on:event.native 修饰符已移除
• v-for 中的 ref 不再注册 ref 数组

组件

• 只能使用普通函数创建函数式组件
• functional attribute 在单文件组件 (SFC) 的 <template> 和 functional 组件选项中被废弃
• 异步组件现在需要使用 defineAsyncComponent 方法来创建
• 组件事件现在需要在 emits 选项中声明

渲染函数

• 渲染函数 API 更改
• $scopedSlots property 已移除，所有插槽都通过 $slots 作为函数暴露
• $listeners 被移除或整合到 $attrs
• $attrs 现在包含 class 和 style attribute

自定义元素

• 自定义元素检测现在在模板编译时执行
• 特殊的 is attribute 的使用被严格限制在被保留的 <component> 标签中

其他小改变

• destroyed 生命周期选项被重命名为 unmounted
• beforeDestroy 生命周期选项被重命名为 beforeUnmount
• default prop 工厂函数不再可以访问 this 上下文
• 自定义指令的 API 已更改为与组件生命周期一致，且 binding.expression 已移除
• data 选项应始终被声明为一个函数
• 来自 mixin 的 data 选项现在为浅合并
• Attribute 强制策略已更改
• 一些过渡的 class 被重命名
• <TransitionGroup> 不再默认渲染包裹元素
• 当侦听一个数组时，只有当数组被替换时，回调才会触发，如果需要在变更时触发，则必须指定 deep 选项
• 没有特殊指令的标记 (v-if/else-if/else、v-for 或 v-slot) 的 <template> 现在被视为普通元素，并将渲染为原生的 <template> 元素，而不是渲染其内部内容。
• 已挂载的应用不会取代它所挂载的元素
• 生命周期的 hook: 事件前缀改为 vnode-

被移除的 API

• keyCode 作为 v-on 修饰符的支持
• $on、$off 和 $once 实例方法
• 过滤器 (filter)
• 内联模板 attribute
• $children 实例 property
• propsData 选项
• $destroy 实例方法。用户不应再手动管理单个 Vue 组件的生命周期。
• 全局函数 set 和 delete 以及实例方法 $set 和 $delete。基于代理的变化检测已经不再需要它们了。

官方的支持库

我们所有的官方库和工具现在都支持 Vue 3，但其中一些仍处于测试版或候选发布状态。你可以在下面找到各个库的详细信息。大多数库目前使用 npm 上的 next dist 标签发布。我们打算在所有官方库有了稳定的兼容版本后，就改用 latest 标签。

Vue CLI

从 v4.5.0 开始，vue-cli 现在提供了内置选项，可在创建新项目时选择 Vue 3。现在可以升级 vue-cli 并运行 vue create 来创建 Vue 3 项目。

• 文档
• GitHub

Vue Router

Vue Router 4.0 提供了 Vue 3 支持，并有许多非兼容的变更，详情见迁移指南。

• 文档
• Github
• RFCs

Vuex

Vuex 4.0 提供了 Vue 3 支持，其 API 与 3.x 基本相同。唯一的非兼容变更是插件的安装方式。

• 文档
• Github

Devtools 扩展

我们正在开发一个新版本的 Devtools，它有一个新的 UI 和经过重构的内部结构，以支持多个 Vue 版本。新版本目前处于测试阶段，目前只支持 Vue 3。Vuex 和 Router 的集成也在进行中。

• Chrome：从 Chrome web 商店中安装
  • 提示：beta 版本可能与 devtools 的稳定版本冲突，因此你可能需要暂时禁用稳定版本，以便 beta 版本正常工作。
• Firefox：下载签名扩展 (assets 下的 .xpi 文件)

IDE 支持

推荐使用 VSCode 和我们官方拓展 Volar，它为 Vue 3 提供了全面的 IDE 支持

提示

想了解更多关于 Vue 3 的库和插件的兼容性信息，请查看 awesome-vue 中的这个 issue。