“vue3.0梳理“之Web Components

Absorbed_zhang

已于 2022-03-23 01:02:10 修改

阅读量928

点赞数 6

分类专栏： vue3.0 回顾基础文章标签： javascript vue.js 前端 vue3.0 Web Components

于 2022-03-01 22:00:28 首次发布

本文链接：https://blog.csdn.net/weixin_44403976/article/details/123216235

版权

29 篇文章 0 订阅

订阅专栏

6 篇文章 1 订阅

订阅专栏

Web Components跟vue3.0没有什么关系,但是为什么我放在了vue3.0的梳理之中,是因为在vue3.0出现的时候,我是看vue3.0的文档才发现的这个东西,可能是跟我学习面不够广有关,我在之前没有关注到这个东西,今天梳理这个也更多是流于概念,实用性不高,但是很重要

Web Components 是一套技术，允许创建可重用的定制元素（封装在代码之外）并且可以在web应用中使用它们
看到这句话实际上很令人有一点疑惑,“一套技术”,“允许创建可重用元素”,但从第二个来看这不就是组建的封装吗,但是一套技术又是什么意思?重点在于可以在web应用中使用它们,注意是web应用,说明什么,在任何框架包括原生js中都可以使用,有的人肯定说那原生js封装不就完了,有什么离奇的吗
原生js封装
在我的记忆中原生js的封装有哪些,都是逻辑的封装,即使有元素的插入也是选中固定id或者class或者标签,进行原有标签的插入,没有自定义标签这一说(应该是我孤陋寡闻,一直没有接触到这个),但是我查了一下这个东西在五六年前肯定是就已经有的,那就是框架导致这个东西用的太少了,非常的少见少用,也正是说原生组件的封装Web Components被我们完全忽略掉了
组件的封装
vue组件的封装并没有说用到什么技术,底层代码我才看了一部分,没有看到相关的逻辑,网上也找了一下没有相关部分的底层逻辑解析
我们从现象来看,vue的组件封装是父子元素的引入,使用vue框架自身的$emit去触发父元素绑定的函数,框架自身携带的props传值接收父元素的传值等等诸如此类的能力,但是缺点就是,vue的组件只能vue框架来引入使用

原生
原生组件，即 Web Components API。相比第三方框架，原生组件简单直接，符合直觉，不用加载任何外部模块，代码量小。目前，它还在发展，但已经可用于生产环境。最初的目的是代码重用，功能相对单一或者独立。在整个系统的代码层次上位于最底层，被其他代码所依赖，所以说组件化是纵向分层。
微前端
框架就有微前端的一些味道在里边,拆分就是微前端的主要思想(个人观点),主要观点就是:独立开发，它的主要特点是组件化、松耦合、自治、去中心化,这些都是我们开发时候刻意去追求的东西,所以说微前端的概念早就在人的心里,只不过是我们没有提出来
在框架中的封装组件去耦合性是有局限性的,比如说我们无论怎么开发,最终都要归到框架中去,我们使用的elementui,antd,诸如此类,都是这样的,看似完全的拆分了,实际上还是有一定的耦合和中心化在里边
Web Components优点就是可以更好的实现微前端的理念,更加松耦合和去中心化,我们所有人开发的东西可以尽量的去拆分,重点是我们开发的组件可以在各个地方使用无论是react还是vue
永不过时
很早就有人说不管什么框架终究会过时的观点,原生的重要性也体现于此

麻烦
这个可能要实际操作才知道其中的问题,实际操作之后发现,项目架构，路由管理，以及存储都需要自己编写代码，这无疑会导致花费更多的时间与精力
发展方向
尽管一直有人说原生才是终点,但是框架终究是主流,而且是赖以生存的主流,Web Components想要完全的将框架的良好特征融入并且做到足够的方便,我暂时是看不到希望的,因为至少这么多年并没有进步
效率
在快餐化的今天,大部分的公司还是以业务为驱动的,那么我们开发的效率以及便捷性,注定了框架一时间不会被任何东西代替

但是不是所有东西都只顾眼前的,底层一定是有用的,框架如同工具,前人栽树后人乘凉固然没有错,但是我们一定得了解树是怎么长起来的,原生是一切框架的基础,只有原生够好,才可以更好的使用框架,才可以在使用框架的途中有所贡献及进步

创建一个类或函数来指定web组件的功能，推荐请使用 ECMAScript 2015 的类语法。
使用 CustomElementRegistry.define() 方法注册自己的新自定义元素，并向其传递要定义的元素名称、指定元素功能的类、以及可选的其所继承自的元素。
如果需要的话，使用Element.attachShadow() 方法将一个shadow DOM附加到自定义元素上。使用原生的DOM方法向shadow DOM中添加子元素、事件监听器等。
如果需要的话，使用和定义一个HTML模板。再次使用常规DOM方法克隆模板并将其附加到shadow DOM中。
最后在页面中使用我们的自定义元素，就像使用原生HTML元素一样

class CompanyCard extends HTMLElement{
   constructor(){}
}
window.custimElements.define('company-card',CompanyCard)

注册好自定义组件之后就可以直接在html中使用<company-card></company-card>

注入js逻辑与样式之后就可以展示出预期的效果了

生命周期(Web Components是有自己的生命周期的)
connectedCallback：当 Custom Elements首次被插入文档DOM时，被调用。
disconnectedCallback：当 Custom Elements 从文档DOM中删除时，被调用。
adoptedCallback：当 Custom Elements 被移动到新的文档时，被调用。
attributeChangedCallback: 当 Custom Elements 增加、删除、修改自身属性时，被调用。

总结:Web Components总体来说,太过原生,太过基础,所以要用的话,就尝试在vue中使用一下,很多地方vue3.0是有可取之处的,但是相对来说Web Components更有可能的是影响到多端开发 Web 化的一个模式和发展

关注