theme: smartblue
Vue3 代号:One Piece
零、前言
专栏开篇,先用三篇文章做个铺垫,将一些重要的基调铺下。
此外,这个系列,这个专栏并不是面向完全的新手的,但是我可以立个flag,只要是度过了Vue的入门期,无论是Vue2还是Vue3,都可以不费力的理解我要讲的内容。
三篇文章讲分别分享三个重要的内容:
1、即本文,主要阐述,在开发组件这一块,Vue3对比Vue2在开发组件需要的功能上一些区别
2、分享一下因为Vue3删除了几个重要的API,而引用的一个库作为平替方案。
3、本人对组件总结的几个大分类,也是接下来文章主题的一个重要顺序。
一、换个角度初识Vue
2019年10月5日:Vue3正式发布发布了第一个测试版本“pre-alpha”,即预览版,或者说测试版。
2020年9月19日:Vue3发布了第一个正式版本, 代号:One Piece。
相信有些关注Vue的小伙伴知道,Vue3的每个版本除了一个版本号以外,都是有一个别致的代号的。
例如之前Vue2的最后一个版本。2.6的代号是“Macross”,也寓意了2.6是Vue2的最终版了。
Vue的第一个版本代号是“Evangelion”,新世界福音战士,现在看来,名副其实啊。
再回过头看Vue3的第一个版本代号,One Piece,这个名称即暗含着诸多宝藏,又将开启一个新的时代。
二、 Vue3的一些主要变化
我们处在前端这种风云变幻的浪潮里,既要稳住下盘做工作,又要紧跟潮流学习新知识,抱抱自己。
本文是该专栏下只是铺垫,所以主要讲解专栏中会用到的一些东西,其他重要的一些变更也会做个简单的提要。
1、广播传值
Vue2中有个东西叫EventBus,即通过实例化一个Vue来实现不想管组件之间的传值,这种传值方式就是广播传值。
EventBus就直译为事件公交车吧, 一个点把需要传递的信息放入“车”上,这辆车在公共点,随叫随到。
每个组件都可以订阅“车内”物品的信息,如果对车内物品有需求的组件都可以把“车”上需要的东西复制一份,或者把需要发出的东西放到“车”上。
通过$emit方法将需要发出的东西放到“车”上;
通过$on方法将需要提取的东西从“车”上拿下来。
而从Vue3开始,彻底删除了$on
,$once
,$off
等方法,$emit
方法因为还需要父子组件通信暂时保留。
这里关于Vue3中删除这几个API方法的原因引用Vue3迁移文档的一段话:
在 Vue 3 中,已经不可能使用这些 API 从组件内部监听组件自己发出的事件了,该用例暂没有迁移的方法。 但是该 eventHub 模式可以被替换为实现了事件触发器接口的外部库,例如 mitt 或 tiny-emitter。
2、生命周期
这一块儿的变化说大不大,下表看下Vue2、Vue3的周期对比吧。
Vue2 | Vue3 | 解释 |
---|---|---|
beforeCreate | setup | 正式挂载之前,data、watch等方法尚未挂载 |
created | setup | data、watch等属性和方法可以调用,但尚未开始挂载 |
beforeMount | onBeforeMount | 挂载完成之前,render函数开始调用 |
mounted | onMounted | 组件挂载完毕,可以调用$el |
beforeUpdate | onBeforeUpdate | 更新之前,可以再次修改,不会重复触发更新。 |
updated | onUpdated | 已经更新完,可以执行依赖于新DOM的操作,但应注意不要修改导致再次更新 |
beforeDestory | onBeforeUnmount | 插件卸载之前,实例仍然完全可用 |
destoryed | onUnmounted | 插件卸载,已经卸载了所有绑定的东西,事件监听器、子组件皆已经销毁 |
errorCaptured | onErrorCaptured | 错误捕获 |
在生命周期这块,Vue3是向下兼容的,所以可以用Vue2的方法去写。
此外,本专栏内所有组件开发全部会采用setup-script语法,所以生命周期也是用的Vue3的钩子函数。
生命周期先说到这,具体的实践使用咱骑驴看唱本——走着瞧。
3、js部分的语法
相信大家都听过Vue2的Options API,Vue3的Composition API,甚至耳朵都听出茧了。
之前我也是一直看着这两个概念发呆,即便能理解他们二者的区别,但是实际开发中如何使用呢?
概念图如下,相信大家都看过,或看似对两个概念的表达,但是实际操作中又往往不知如何下手。
无论是否有如此困惑,我都会为了骗你看下去而留坑,等后面实际开发组件再结合实践来讲解我的一些理解。
4、父子传值
Vue3提供了新的父子组件传值方式,因为比较简单,这里直接来个小demo作讲解吧;
这里要注意的是, provide、inject开发中应该在对应的组件引入,这里简写。
// father
import { provide, inject} from 'vue';
provide('title', '天气不错');
// son
const title = inject('title')
5、setup-script语法
vue3的setup中可用的一些钩子和语法,相较之前的Vue来说,变化还是不小的,但是学习成本很低,所以大家不用太有心智负担。
另外setup还有完整的写法:setup-script,可以简单粗暴的理解为,所有的JavaScript都写在setup中。
举个简单栗子吧;
<script>
// setup
import ** from '';
export default {
setup(props, ctx){
// 一部分预处理的代码
},
mounted(){}
}
<script>
// setup-script
<script setup>
import {defineProps, getCurrentInstance} from ''vue;
const {ctx} = getCurrentinstance(); // 略等于this
const props = defineProps({});
cosnt fn = () => {};
</script>
别去思考我这是要写个什么功能,这里只是简单的列出两者语法的差别,实践操作我还是留坑到组件开发中结合案例来讲解。
另外我有存稿,不用担心等很久才能看到。 是的,我在求关注、点赞,收藏。
6、其他的一些改动
改动当然不只前面的这些,还有其他的一些小改动,包括新增了teleport
、 用新的方法去实现mixin
、按需引入
等。
这些在组件开发的相关文章中都会一一提及,继续留坑。
三、本专栏组件三剑客
因为常规的html+css部分大家都很熟悉了,所以我在开发过程中一直使用的scss,而在开发写这个组件库的时候(虽然没写完),突然脑洞一开,搞了一波pug。
pug的语法很好理解, 大家不用有什么心理负担,他之于html就如同scss之于css。虽然看起来不同,但本质是一样的。只是语法变了一些,同时多了一些有意思的语法。
另外就是刚刚提到的setup, 我在组件开发的过程中,全部是使用的setup-script语法,
当然,并不是我闲着无聊要这么做,在这次组件库的开发中,采用pug + scss + setup-script的方式开发也是为了扩大自己的技术宽度。(所以其实还是闲着无聊?)
后面的文章中,如果有必要的话,会为了展示一些其他语言的特性,而采用一些舍近求远的写法, 所以如果想深入学习pug、scss也可以看看呀。
四、写在最后
第一次写专栏,觉好求关。
第一次写系列,觉好留赞。
随着Vue3的逐渐完善,以及大家技术层面逐渐过渡的Vue3,并且前文未提交的Vite、以及一些底层的优化更新。Vue3的时代应该是指日可待。
虽然目前为止,笔者在工作中也仍是使用Vue2(uniapp没法用Vue3)。 但对Vue3的探索还是不能停止的。毕竟除了语法和框架思想的差别,实际开发的思想是不变的,只是根据实际开发选择当下最优解。
所以,接下来的Vue3组件开发系列中,大家一起携手前行吧。
版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 林深鹿 原文链接:https://juejin.im/post/6991288553305014280