2022年必会Vue3.0学习

简介: Vue3.0学习建议,针对学会vue2.0的同学。

Vue3.0学习建议
针对学会vue2.0的同学
Vue3.0新特性
中文文档

Composition Api (最核心)
v-model更改
v-for的key节点上的使用情况更改
v-if和v-for对同一元素的优先级更高
ref内部v-for不再注册引用数组
功能组件只能使用普通函数创建
异步组件需要使用defineAsyncComponent创建方法
所有插槽都通过$slots
在destroyed生命周期的选项已更名为unmounted
在beforeDestroy生命周期的选项已更名为beforeUnmount
...

Vue3.0优缺点
优点:

将Vue内部的绝大部分api对外暴露,使Vue具备开发大型项目的能力,例如compile编译api等
webpack的treeshaking(tree shaking 是 DCE 的一种方式,它可以在打包时忽略没有用到的代码。)支持度友好
使用Proxy进行响应式变量定义,性能提高1.2~2倍
ssr快了2~3倍
可在Vue2.0中单独使用composition-api插件,或者直接用它开发插件
对typescript支持更加友好
面向未来:对于尤雨溪最近创新的vite开发服务器(舍弃webpack、底层为Koa框架的高性能开发服务器),直接使用的Vue3.0语法

缺点:

vue3将不再支持IE11,Vue 在 2.X 版本仍然支持 IE11,如果你想使用类似 Vue 3 的新特性,可以等等 Vue 2.7 版本。这次的 RFC 宣布,将会对 2.7 版本做向后兼容,移植 3.x 的部分新功能,以保证两个版本之间相似的开发体验。
对于习惯了Vue2.0开发模式的开发者来说,增加了心智负担,对开发者代码组织能力有体验

同时也是能力提升的机会吧,特别喜欢Vue作者的而设计初心:让开发者随着框架一起成长

体验Vue3.0的四种姿势
现在来说,体验Vue3.0有四种姿势 传送门

通过CDN:

通过 Codepen 的浏览器 playground

脚手架 Vite:
npm init vite-app hello-vue3 # OR yarn create vite-app hello-vue3
复制代码

尤大开发的新工具vite,下一代前端开发与构建工具,原来是利用浏览器现在已经支持ES6的import;遇到import会发送一个http请求去加载对应的文件,vite拦截这些请求,做预编译,就省去了webpack冗长的打包事件,提升开发体验。

脚手架 vue-cli
npm install -g @vue/cli # OR yarn global add @vue/cli
vue create hello-vue3

select vue 3 preset

相关文章
|
Ubuntu Java Linux
Manjaro Linux 入门使用教程
Manjaro 是一款基于 Arch LInux 的自由开源发行版,它吸收了 Arch Linux 优秀丰富的软件管理,同时提供了稳定流畅的操作体验。
6641 1
Manjaro Linux 入门使用教程
|
10月前
|
人工智能 供应链 安全
面向高效大模型推理的软硬协同加速技术 多元化 AI 硬件引入评测体系
本文介绍了AI硬件评测体系的三大核心方面:统一评测标准、平台化与工具化、多维度数据消费链路。通过标准化评测流程,涵盖硬件性能、模型推理和训练性能,确保评测结果客观透明。平台化实现资源管理与任务调度,支持大规模周期性评测;工具化则应对紧急场景,快速适配并生成报告。最后,多维度数据消费链路将评测数据结构化保存,服务于综合通用、特定业务及专业性能分析等场景,帮助用户更好地理解和使用AI硬件。
|
存储 运维 Kubernetes
云原生游戏最佳实践系列| 学习笔记
快速学习云原生游戏最佳实践系列
云原生游戏最佳实践系列| 学习笔记
|
存储 JSON Prometheus
Prometheus+SpringBoot应用监控全过程详解
1. Prometheus是什么 Prometheus是一个具有活跃生态系统的开源系统监控和告警工具包。一言以蔽之,它是一套开源监控解决方案。
|
XML 机器学习/深度学习 存储
基于OpenCV训练口罩检测数据集并测试
基于OpenCV训练口罩检测数据集并测试
559 0
基于OpenCV训练口罩检测数据集并测试
|
机器学习/深度学习 人工智能 运维
全息仿真:建模仿真应用探索
本篇内容分享了全息仿真:建模仿真应用探索。
788 0
全息仿真:建模仿真应用探索
杰里AC79XX之开发环境搭建(1)
杰里AC79XX之开发环境搭建(1)
1322 0
杰里AC79XX之开发环境搭建(1)
|
XML 存储 Java
XML配置文件的编写与解析
XML配置文件的编写与解析
1243 0
XML配置文件的编写与解析
|
消息中间件 Cloud Native 安全
2021云栖大会|东方通正式加入阿里云云原生合作伙伴计划,强强联手共创国产数字化转型新风向!
近日,互联网 IT 峰会中当属每年一度的“云栖大会”热度高,东方通作为核心伙伴受邀参加 2021 云栖大会,并与阿里云一起探讨中间件支撑云原生技术推动政企行业数字化转型的新方向。
2021云栖大会|东方通正式加入阿里云云原生合作伙伴计划,强强联手共创国产数字化转型新风向!
|
弹性计算 应用服务中间件 Shell
ECS安装宝塔面板并部署Python项目
即将大三,通过网络了解到飞天加速计划,对自己使用ECS安装宝塔面板并部署Python项目体验作全程步骤记录。感谢阿里云,让我有在云服务器上实践部署的机会