Vue3从0到1开发组件前戏(上):One piece|8月更文挑战__前端__Vue.js
发布于 3 年前 作者 banyungong 918 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

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 模式可以被替换为实现了事件触发器接口的外部库,例如 mitttiny-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,甚至耳朵都听出茧了。

之前我也是一直看着这两个概念发呆,即便能理解他们二者的区别,但是实际开发中如何使用呢?

概念图如下,相信大家都看过,或看似对两个概念的表达,但是实际操作中又往往不知如何下手。

无论是否有如此困惑,我都会为了骗你看下去而留坑,等后面实际开发组件再结合实践来讲解我的一些理解。

未标题-1.png

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

回到顶部