當 Vue 隻有 5kb：尤雨溪釋出新作 petite-vue，針對漸進增強進行優化

前端程式員想必對尤雨溪及其開發的 Vue 架構不陌生。Vue 是一套用于建構使用者界面的漸進式 JavaScript 架構，在 2014 年釋出後獲得了大量開發者的青睐，目前已更新至 3.0 版本。與其它大型架構不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫隻關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鍊以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。

最近，尤雨溪釋出了一款針對漸進增強（progressive enhancement）進行優化的 Vue 發行版——petite-vue，大小僅有約 5kb。與标準 Vue 相比，petite-vue 具備相同的模闆文法和響應式心理模型，而二者的差别在于 petite-vue 專門針對在伺服器架構渲染的一個現有 HTML 頁面上 “sprinkle” 少量互動進行了優化。

petite-vue 的亮點不僅在于體積小，還在于它能夠使用針對漸進增強的最優實作，後者是它與标準 Vue 的主要差別，也是其主要優勢。尤雨溪透露 petite-vue 與 Vue 1 的工作原理類似，但實作細節更優：petite-vue 周遊實際 DOM，并利用 @vue/reactivity 連接配接 (attach) 細粒度 reactive effects，是以其更新可精确抵達各個binding。

petite-vue 項目釋出後獲得了大量關注，連續多日出現在 GitHub Trending 榜單上，在數日内即獲得 2300 顆星。

項目位址：​

https://github.com/vuejs/peti... 接下來我們來看 petite-vue 的更多細節。

主要特性

petite-vue 具備以下特性：

大小僅為約 5.8kb

Vue 相容的模闆文法

基于 DOM (mutates in place)

由 @vue/reactivity 驅動

如何使用？

petite-vue 可以不經過 build 步驟直接使用，隻需從 CDN 處加載即可：

<script src="https://unpkg.com/petite-vue" defer init>script>

​

<div v-scope="{ count: 0 }">

  {{ count }}

  <button @click="count++">incbutton>

div>

• 使用 v-scope 在頁面上标記應被 petite-vue 控制的區域。
• defer 屬性使腳本在 HTML 内容經過解析後執行。
• init 屬性使 petite-vue 自動 query 并初始化頁面上被 v-scope 标記的所有元素。

如果不想使用以上自動初始化方法，你可以移除 init 屬性，将腳本移至 < body > 末尾：

<script src="https://unpkg.com/petite-vue">script>

<script>

  PetiteVue.createApp().mount()

script>

或者使用 ES module build：

<script type="module">

  import { createApp } from 'https://unpkg.com/petite-vue?module'

  createApp().mount()

除了初始化方法之外，petite-vue 的項目頁面中還介紹了 CDN URL 生産、Root Scope、生命周期事件等。更多細節參見 GitHub 項目頁面。