读者们可能已经注意到,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