5kb 的 Vue：尤雨溪發(fā)布新作 petite-vue
技術(shù)編輯：小魔丨來(lái)自 思否編輯部
前端程序員想必對(duì)尤雨溪及其開(kāi)發(fā)的 Vue 框架不陌生。Vue 是一套用于構(gòu)建用戶(hù)界面的漸進(jìn)式 JavaScript 框架，在 2014 年發(fā)布后獲得了大量開(kāi)發(fā)者的青睞，目前已更新至 3.0 版本。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類(lèi)庫(kù)結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。
最近，尤雨溪發(fā)布了一款針對(duì)漸進(jìn)增強(qiáng)（progressive enhancement）進(jìn)行優(yōu)化的 Vue 發(fā)行版——petite-vue，大小僅有約 5kb。與標(biāo)準(zhǔn) Vue 相比，petite-vue 具備相同的模板語(yǔ)法和響應(yīng)式心理模型，而二者的差別在于 petite-vue 專(zhuān)門(mén)針對(duì)在服務(wù)器框架渲染的一個(gè)現(xiàn)有 HTML 頁(yè)面上 “sprinkle” 少量交互進(jìn)行了優(yōu)化。
petite-vue 的亮點(diǎn)不僅在于體積小，還在于它能夠使用針對(duì)漸進(jìn)增強(qiáng)的最優(yōu)實(shí)現(xiàn)，后者是它與標(biāo)準(zhǔn) Vue 的主要區(qū)別，也是其主要優(yōu)勢(shì)。尤雨溪透露 petite-vue 與 Vue 1 的工作原理類(lèi)似，但實(shí)現(xiàn)細(xì)節(jié)更優(yōu)：petite-vue 遍歷實(shí)際 DOM，并利用 @vue/reactivity 連接 (attach) 細(xì)粒度 reactive effects，因此其更新可精確抵達(dá)各個(gè)binding。
petite-vue 項(xiàng)目發(fā)布后獲得了大量關(guān)注，連續(xù)多日出現(xiàn)在 GitHub Trending 榜單上，在數(shù)日內(nèi)即獲得 2300 顆星。
項(xiàng)目地址：
https://github.com/vuejs/petite-vue
接下來(lái)我們來(lái)看 petite-vue 的更多細(xì)節(jié)。
主要特性
petite-vue 具備以下特性：
大小僅為約 5.8kb
Vue 兼容的模板語(yǔ)法
基于 DOM (mutates in place)
由 @vue/reactivity 驅(qū)動(dòng)
如何使用？
petite-vue 可以不經(jīng)過(guò) build 步驟直接使用，只需從 CDN 處加載即可：
<script src="https://unpkg.com/petite-vue" defer init></script>
<!-- anywhere on the page -->
<div v-scope="{ count: 0 }">
{{ count }}
<button @click="count++">inc</button>
</div>
使用 v-scope 在頁(yè)面上標(biāo)記應(yīng)被 petite-vue 控制的區(qū)域。 defer 屬性使腳本在 HTML 內(nèi)容經(jīng)過(guò)解析后執(zhí)行。 init 屬性使 petite-vue 自動(dòng) query 并初始化頁(yè)面上被 v-scope 標(biāo)記的所有元素。
<script src="https://unpkg.com/petite-vue"></script>
<script>
PetiteVue.createApp().mount()
</script>
<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue?module'
createApp().mount()
</script>