一.为什么要学习 Vue 3
Vue 是目前国内开发最火的前端框架之一
vue3.0正式版已发布,社区生态已经逐步完善
部分技术选型激进的公司已经在生产环境使用了vue3
二. 目前已支持 vue3 的UI组件库
ant-design-vuehttps://antdv.com/docs/vue/introduce-cn/ant-design-vue 是 Ant Design 的 Vue 实现,组件的风格与 Ant Design 保持同步
目前支持 Vue 3.0 的 2.0.0 测试版 已发布
element-plushttps://element-plus.gitee.io/#/zh-CN
Element Plus,一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库
vanthttps://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的常用集合,小兔仙项目会部分使用
三. Vue3带来的新变化
性能提升
首次渲染更快
diff算法更快
内存占用更少
打包体积变小
更好的Typescript支持
Composition AP
在使用vue2.x版本开发较复杂的组件时,逻辑难以复用,组合式api的出现可以解决此类问题
相关阅读:
Vue3
中文文档 https://vue3js.cn/docs/zh/
Vue3 设计理念 https://vue3js.cn/vue-composition/
四. 破坏性语法更新
vue3.0对于2.0版本的大部分语法都是可以兼容的,但是也有一些破坏性的语法更新,这个大家要格外注意
实例方法$on移除
(eventBus现有实现模式不再支持 可以使用三方插件替代)
过滤器filter移除 (插值表达式里不能再使用过滤器
可以使用methods替代)
.sync语法移除 (和v-model语法合并)
更多阅读: https://v3.cn.vuejs.org/guide/migration/introduction.html