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

·  阅读 1279
尝鲜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标准的关键特性之一
  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代码地址

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改