根据官方指引,这篇迁移指南是针对有 Vue2 经验的开发者准备的,它讲述了 Vue3 和 Vue2 的共同点和不同点以及使用上的区别,方便更快速地浏览 Vue3 的新特性
一、快速开始
在一个新项目快速尝试 Vue3,可以通过以下几个方式
- 通过 CDN
<script src="[https://unpkg.com/vue@next"></script>](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
二、值得注意的新特性
Vue3 中一些需要关注的新功能包括
- 组合式 API
- Teleport
- 片段
- 触发组件选项
- 来自
@vue/runtime-core
的createRenderer
API,用于创建自定义渲染器 - 但文件组件组合式 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-if
和v-for
优先级已更改 v-bind="object"
现在排序敏感v-on:event.native
修饰符已移除v-for
中的ref
不再注册 ref 数组
后面还有很多改动,“介绍”这一章节是一个概览,官网的总结很简练了,看官网吧
四、参考链接
介绍:https://v3.cn.vuejs.org/guide/migration/introduction.html