尝鲜vue3.0- one Piece发布后的新鲜事（6）

背景

延续前面的五篇文章：

• 尝鲜vue3.0-从ToDoList开始（1）
• 尝鲜vue3.0-了解变化(2)
• 尝鲜vue3.0-tyepscript开发组件(3)
• 尝鲜vue3.0- 看完就开干（4）
• 尝鲜vue3.0- 扶我起来学一下组合式API（5）

  上周六晚上，vue3.0正式发布。本觉得距离正式发布还须要一段日子，忽然就发了正式版本“One Piece”。
  vue3.0最新的release地址
  看完以后，发现了一个新东西😨lit-html

  再去尤大佬的github上面Look了一眼，看见了一个新的小工具vue/lit

---

vue/lit源码

• 首先，这一个@vue/reactivity 和 lit-html结合在一块儿的迷你版自定义元素框架(不满70行代码)
• 源码都干啥了

customElements.define是啥

  自定义元素是可以建立将功能封装在HTML页面上的自定义元素，而没必要使用一长批嵌套的元素，是Web Components标准的关键特性之一<br/>  customElements是CustomElementRegistry的别名<br/>  API在MDN地址

//html
<div id="content"></div>
<div is="button-hello">123</div>

---

lit-html是啥

能够在 javascript 中写的 html 模版引擎
<br/>lit-html官网地址
<br/> 表面上看很像jsx ，可是这仅是 JavaScript 的语法。lit-html并无虚拟 dom 的概念也没有 diff 检查，更专一作为渲染引擎，不提供组件、应用框架的东西，所以，概念极少，基本上就一个构造 html 模板，而后就是render。所以大佬开发vue-lit，尝试将二者结合，为vue用户提供其余的渲染引擎。
<br/>特色：

• 能够在 javascript 中写的 html 模板
• 快速启动和更新,不须要构建工具预编译、预处理（不高的浏览器兼容性，面向之后的技术）
• 体积小
• 上手easy，API扩展性强

// Import lit-html
import {html, render} from 'lit-html';

// Define a template
const myTemplate = (name) => html`<p>Hello ${name}</p>`;

// Render the template to the document
render(myTemplate('World'), document.body);

---

最后

vue3.0到这里算是尝鲜完毕，赶忙学起来吧。
喜欢就点赞哟，溜啦溜啦！
github代码地址

![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/31398db0bb02435d9e941ea899540f8a~tplv-k3u1fbpfcp-zoom-1.image)