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

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

读者们可能已经注意到,Vue组件与自定义元素(Custom Elements)非常相似,自定义元素是Web组件规范(Web Components Spec)的一部分(https://www.w3.org/wiki/WebComponents/>)。这是因为Vue的组件语法是松散地按照规范建模的。例如,Vue组件实现了Slot API()和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组件,这些组件将自己注册为原生自定义元素。

参考引用

目录
相关文章
|
5天前
vue3学习(3)
vue3学习(3)
|
5天前
|
资源调度 JavaScript API
vue3封装城市联动组件
vue3封装城市联动组件
|
2天前
|
JavaScript API
Vue3中的计算属性能否动态修改
【9月更文挑战第5天】Vue3中的计算属性能否动态修改
23 10
|
8天前
|
JavaScript 前端开发 开发者
哇塞!Vue.js 与 Web Components 携手,掀起前端组件复用风暴,震撼你的开发世界!
【8月更文挑战第30天】这段内容介绍了Vue.js和Web Components在前端开发中的优势及二者结合的可能性。Vue.js提供高效简洁的组件化开发,单个组件包含模板、脚本和样式,方便构建复杂用户界面。Web Components作为新兴技术标准,利用自定义元素、Shadow DOM等技术创建封装性强的自定义HTML元素,实现跨框架复用。结合二者,不仅增强了Web Components的逻辑和交互功能,还实现了Vue.js组件在不同框架中的复用,提高了开发效率和可维护性。未来前端开发中,这种结合将大有可为。
36 0
|
5天前
|
JavaScript 前端开发
vue3学习(1)
vue3学习(1)
85 44
|
2天前
|
JavaScript API
如何使用Vue3的可计算属性
【9月更文挑战第5天】如何使用Vue3的可计算属性
35 13
|
2天前
|
资源调度 JavaScript API
vue3 组件通信方式
vue3 组件通信方式
23 11
|
2天前
|
缓存 JavaScript API
Vue3— computed的实现原理
【9月更文挑战第5天】Vue3— computed的实现原理
18 10
|
5天前
|
存储 JavaScript
vue组件的五种传值方法(父子\兄弟\跨组件)
vue组件的五种传值方法(父子\兄弟\跨组件)
|
4天前
|
存储 JavaScript 前端开发
Vue 3的响应式系统是如何工作的呢
【9月更文挑战第3天】Vue 3的响应式系统是如何工作的呢
17 4
下一篇
DDNS