上个月 [LuLu UI Edge 主题](https://github.com/yued-fe/lulu)对外的时候发了条微博，由于 LuLu UI 是基于原生 DOM 开发的，因此，就有人认为是不支持 Vue 的，这个就属于误会了，LuLu UI 在 Vue 中的支持非常好。所以，我觉得有必要专门写篇文章讲下这个问题。 ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dba71c6e2f0c43b0bd0a7ff136828bda~tplv-k3u1fbpfcp-watermark.image) ### 一、原生语言的魅力 LuLu UI 的 Pure 主题（IE9+）和 Edge 主题（非IE）都是基于原生 JavaScript 语法开发的，没有刻意和任何框架接近，这就保证了其作为跨项目、跨团队的统一解决方案成为了可能。例如团队中 A 产品使用的是 Vue，B 产品使用的是 React（或Preact），此时，领导想要这两个产品统一 UI 组件库，那种根植于 Vue 规则或者 React 规则的 UI 组件库肯定是无法完成这个使命的。只有原生语言开发，保持自身个性的 UI 组件库才能完成这样一件事情。其实道理很简单，无论是 Vue 还是 React，底层也都是使用原生 JavaScript 语言开发的，本是同根生，相兼不用急。 **数据驱动修改的还是 DOM** LuLu UI 是基于 HTML 元素开发的，一切都是围绕 HTML 元素的属性变化展开，这个和数据驱动一点也不冲突，因为数据驱动最终修改的还是 DOM。只是，LuLu UI 中 DOM 修改后的 UI 同步采用的是自己内置的观察器，不是 Vue 的，也不是 React的，也就是虽然不依赖 Vue 和 React，但是就组件思想而言，和 Vue、React 等框架是一脉相承的，因此，可以完全兼容。举个例子，在 LuLu UI 中，分页组件的总页数和当前页数都是通过 HTML 属性控制的，例如下面代码中的 total 和 per： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dd309fd9e04b45de825a71995b454055~tplv-k3u1fbpfcp-watermark.image) 如果是在 jQuery 开发项目中，我们会直接操作 DOM 属性的值使分页发生变化，例如： $('ui-pagination').attr('total', 200) 功能 OK，来了来了，症结点来了，看多人看到这里就误认为 LuLu UI 组件使用的时候需要直接操作 DOM，错啦，不是的啊！注意，注意，请注意，我们直接使用数据驱动，同样也是功能 OK的，例如： { data() { return { total: 100, per: 8 } } this.data.total = 200; 分页组件的 UI 也是会自动变化的。原因很简单，LuLu UI 中的组件关心的是 DOM 上属性的变化和 DOM 元素自身的变化，至于这个 DOM 元素是直接选择器获取发生的变化，还是在虚拟 DOM 中处理发生的变化，LuLu UI 并不关心。所以，在 Vue 和 React 中使用 LuLu UI 是完全没问题的，当然，在原生环境或者 jQuery 项目中使用也是没问题的。 ### 二、原生能力的魅力 LuLu UI 是如何实现 DOM 属性变化组件 UI 同步变化的呢？这就要讲讲浏览器原生的组件能力了。 **1\. 原本就有的组件** 本质上，输入框、单复选框等表单控件就是一个组件：此时，我们只需要使用 CSS 对整个 input 元素进行美化，一个功能完好的输入框 UI 组件就好了，value 赋值内容会变化，输入行为发生会触发 change、input 等事件，无论何时，只要该 DOM 元素和页面建立联系，其 UI 表现就会瞬时渲染。开发者无需关心组件本身，只需要专注在业务逻辑就好了。 **2\. 内置自定义元素** 然而，有部分 UI 组件无法直接使用 CSS 进行彻底的美化，例如此时，就需要借助 JavaScript 进行全新的 DOM 构造，然后使用 CSS 实现最终的美化后的下拉框。问题来了，构造是没问题的，如何让 Customized built-in element 本质上也是 Web Components，无论是生命周期函数，还是对属性的观察与检测都是浏览器天然支持的。无需开发者自己去处理何时初始化，以及自己写事件函数去识别 HTML 属性变化。 **3\. 标准自定义元素** 例如，上面提到的就是自定义元素，开发者可以任意定义 HTML 属性作为组件的 API 接口。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c80c4475f4064ece80d6d71e416f3bd1~tplv-k3u1fbpfcp-watermark.image) 在 LuLu UI 中有很多组件都是 Web Components 自定义元素组件，例如下拉、选项卡、轻提示组件等。由于非本文重点，不展开。 **4\. 自定义属性的观察** 在 LuLu UI 中，标准 HTML 元素也能拥有组件的能力，只需要添加一个自定义属性即可，例如 Drop 下拉效果，只需要设置一个 is-drop 属性，就拥有了下拉选择的能力。 click我这是使用 MutationObserver 实现的，也是 Pure 主题实现 HTML 属性驱动的核心方法。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0eae0e24783b498dbbfb8c1b5a3fc536~tplv-k3u1fbpfcp-watermark.image) 正是借助上述浏览器的能力，使得 LuLu UI 中的组件可以和数据驱动无缝对接，因为 HTML 属性值其实就是数据。 ### 三、在 Vue 中使用 LuLu UI LuLu UI 和 Vue 可以 100% 无障碍使用，这里有一些使用指南与建议。 **1. 使用template元素** Vue 支持常规的 HTML 元素作为渲染的一部分，例如下面这样：

但是在 LuLu UI 中，会有问题，因为会存在 `` 是一个符合 LuLu UI 规则的 UI 组件，则会执行组件渲染，当再次执行 Vue 的 DOM 渲染，`