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