3,vue组件与自定义元素Web Components

167 阅读2分钟

vue组件与自定义元素Web Components的关系

出于蓝而胜于蓝

用于定义具有数据传递、事件发出和生命周期管理功能的可重用组件

自定义元素:

1,不受限于框架

2,功能不太完善

3,受限于浏览器支持性

vu组件:

1,受限于vue框架

2,功能做了优化完善

3,浏览器需要支持vue(支持**Object.defineProperties(obj, props)**)

  • 一个声明式的、高效的模板系统;
  • 一个有助于跨组件逻辑提取和重用的响应式状态管理系统;
  • 一个能在服务器端渲染组件并在客户端集成的高效方法(SSR),这对于 SEO 和 Web 关键指标 (例如 LCP) 来说很重要。
  • 激进的插槽定值会阻碍组件的整合。Vue 的作用域插槽提供了非常强大的组件整合机制,这是原生插槽所没有的,因为原生插槽的激进特性。激进特性插槽同样意味着接收组件无法控制何时或是否需要渲染一段插槽内容。
  • 目前,发布带有隐式 DOM scoped CSS 的自定义元素需要将 CSS 嵌入到 JavaScript 中,以便它们可以在运行时注入到隐式根中。在 SSR 场景中,它们还会导致重复定义样式。该领域有一些平台特性正在开发中——但截至目前,它们尚未得到普遍支持,并且仍有生产环境性能/ SSR 问题需要解决。而与此同时,Vue SFC 已经提供了 CSS 作用域机制,支持将样式提取到纯 CSS 文件中。

组件化思想

1,可复用

2,可扩展

应用与组件实例

应用是根组件的实例

根组件由个子组件组成