嚐鮮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)