手记

Vue 3系列之04——Vue 3组件与Web组件的异同点

2022-05-16 21:35:594041浏览

老卫

1实战 · 202手记 · 2推荐

读者们可能已经注意到,Vue组件与自定义元素(Custom Elements)非常相似,自定义元素是Web组件规范(Web Components Spec)的一部分(https://www.w3.org/wiki/WebComponents/)。这是因为Vue的组件语法是松散地按照规范建模的。例如,Vue组件实现了Slot API(https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md)和is特殊属性。除此之外,Vue组件和Web组件有一些关键的区别:

  • Web组件规范虽然已最终确定,但并非都每个浏览器都原生支持。Safari 10.1+、Chrome 54+和Firefox 63+等是原生支持Web组件的。相比之下,Vue组件在所有受支持的浏览器(包括IE11)中都能一致工作。当需要时,Vue组件还可以包装在原生自定义元素中。
  • Vue组件提供了普通自定义元素中无法提供的重要功能,最明显的是跨组件数据流、自定义事件通信和构建工具集成。

虽然Vue内部不使用自定义元素,但在作为自定义元素消费或分发时,它具有很好的互操作性(https://custom-elements-everywhere.com/#vue)。Vue CLI还支持构建Vue组件,这些组件将自己注册为原生自定义元素。

参考引用

0人推荐
随时随地看视频
慕课网APP