尝鲜vue3.0- one Piece发布后的新鲜事(6)

背景

延续前面的五篇文章:

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

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


vue/lit源码

  • 首先,这一个@vue/reactivitylit-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)
阅读 140

推荐阅读
vue3尝鲜之旅
用户专栏

前端工程师

0 人关注
6 篇文章
专栏主页