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