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

Posted 2022-09-06 _waylau

读者们可能已经注意到，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组件，这些组件将自己注册为原生自定义元素。

参考引用

• 本系列归档至《跟老卫学 Vue.js 开发》：https://github.com/waylau/vuejs-enterprise-application-development
• 参考书籍《Vue.js 3 企业级应用开发实战》（柳伟卫著，电子工业出版社出版）：：https://item.jd.com/13624356.html