尝鲜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)