根据官方指引,这篇迁移指南是针对有 Vue2 经验的开发者准备的,它讲述了 Vue3 和 Vue2 的共同点和不同点以及使用上的区别,方便更快速地浏览 Vue3 的新特性

一、快速开始

在一个新项目快速尝试 Vue3,可以通过以下几个方式

  • 通过 CDN <script src="[https://unpkg.com/vue@next"></script>](https://unpkg.com/vue@next"></script>)
  • Codepen
  • CodeSandbox
  • 通过脚手架 Vite

    1. npm init vite hello-vue3 -- --template vue # 或 yarn create vite hello-vue3 --template vue
  • 通过脚手架 vue-cli

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

二、值得注意的新特性

Vue3 中一些需要关注的新功能包括

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

三、非兼容的变更

1. 全局 API

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

2. 模板指令

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

后面还有很多改动,“介绍”这一章节是一个概览,官网的总结很简练了,看官网吧

四、参考链接

介绍:https://v3.cn.vuejs.org/guide/migration/introduction.html