Vue3

1.目前已支持 vue3 的UI组件库

• ant-design-vue
  https://antdv.com/docs/vue/introduce-cn/

  ant-design-vue 是 Ant Design 的 Vue 实现，组件的风格与 Ant Design 保持同步

  目前支持 Vue 3.0 的 2.0.0 测试版 已发布

• element-plus
  https://element-plus.gitee.io/#/zh-CN

Element Plus，一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库

• vant
  https://vant-contrib.gitee.io/vant/v3/#/zh-CN

轻量、可靠的移动端 Vue 组件库

Vant 是有赞前端团队开源的移动端组件库，于 2016 年开源，已持续维护 4 年时间

目前 Vant 已完成了对 Vue 3.0 的适配工作，并发布了 Vant 3.0 版本

• VueUse
  https://vueuse.org/

基于composition组合api的常用集合，小兔仙项目会部分使用

2. Vue3带来的新变化

2.1性能提升

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

2.2 更好的Typescript支持

2.3 Composition API

在使用vue2.x版本开发较复杂的组件时，逻辑难以复用，组合式api的出现可以解决此类问题

相关阅读:

1. Vue3 中文文档 https://vue3js.cn/docs/zh/
2. Vue3 设计理念 https://vue3js.cn/vue-composition/

3. 破坏性语法更新

• vue3.0对于2.0版本的大部分语法都是可以兼容的，但是也有一些破坏性的语法更新，这个大家要格外注意

1. 实例方法$on移除 （eventBus现有实现模式不再支持 可以使用三方插件替代）
2. 过滤器filter移除 （插值表达式里不能再使用过滤器 可以使用methods替代）
3. .sync语法移除 （和v-model语法合并）

更多阅读：
https://v3.cn.vuejs.org/guide/migration/introduction.html

4. Vue3开发环境搭建

4.1 创建脚手架命令

vue create xxxxx(项目名)

4.2选择自定义配置

4.3 选中自定义安装版本

4.4 选择3.x版本

后面的点回车就可以了,vue-cli会帮助我们跑起来一个内置了vue3版本的vue项目

5. Vue3一些文件的变化

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

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

• 然后打开main.js入口文件，发现Vue的实例化发生了一些变化，由先前的new关键词实例化，转变为createApp方法的调用形式 （更多详情：https://www.bilibili.com/read/cv10133036）

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')

• 最后我们打开一个单文件组件发现，vue3.0的单文件组件中不再强制要求必须有唯一根元素

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