Vue3带来的新变化

优化

1. 性能提升（零成本：从vue2切到vue3就享受到）

   首次渲染更快，diff算法更快，内存占用更少，打包体积更小，....

2. 更好的Typescript支持（在vue下写TS更方便了）

3. 提供新的写代码的方式：Composition API （需要学习成本）

相关阅读： Vue3 中文文档 Vue3 设计理念

支持 vue3 的UI组件库: ant-design-vue, element-plus, vant

基于composition组合api的常用集合 : VueUse

Vue2在Vue3中被废弃的部分

vue3.0对于2.0版本的大部分语法都是可以兼容的（之前是怎么写的，现在也正常写），但是也有一些破坏性的语法更新，这个大家要格外注意

1. 移除了$on方法 （eventBus现有实现模式不再支持，可以使用三方插件替代）
2. 移除过滤器选项 （插值表达式里不能再使用过滤器filter， 可以使用methods替代）
3. 移除 .sync语法（v-bind时不能使用.sync修饰符了，现在它v-model语法合并了）

更多阅读，参考官网

开发环境搭建

创建项目

命令：Vue create 项目名

选中 Vue3 Preview

版本报错

手动下载版本 : npm i vue-loader-v16

目录分析

主要看三个位置：

1. package.json
2. main.js
3. app.vue

package.json

首先我们可以看一下package.json文件，在dependencies配置项中显示，我们当前使用的版本为3.0.0

"dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
}

main.js

然后打开main.js 入口文件，发现Vue的实例化发生了一些变化，由先前的new关键词实例化，转变为createApp方法的调用形式 。

vue2.x中的写法

new Vue({
  el: '#app',
  render: h => h(App)
})

vue3.x的写法

import { createApp } from 'vue'
import App from './App.vue' // 根组件
createApp(App).mount('#app')

app.vue

打开app.vue发现：vue3.0的单文件组件中不再强制要求必须有唯一根元素

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>