背景
延续前面的五篇文章：
- 尝鲜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标准的关键特性之一
customElements是CustomElementRegistry的别名
API在MDN地址
//html
<div id="content"></div>
<div is="button-hello">123</div>
lit-html是啥
可以在 javascript 中写的 html 模版引擎
lit-html官网地址
表面上看很像jsx ，但是这仅是 JavaScript 的语法。lit-html并没有虚拟 dom 的概念也没有 diff 检查，更专注做为渲染引擎，不提供组件、应用框架的东西，因此，概念极少，基本上就一个构造 html 模板，然后就是render。因此大佬开发vue-lit，尝试将两者结合，为vue用户提供其他的渲染引擎。
特点：
- 可以在 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代码地址
