5kb 的 Vue：尤雨溪發佈新作 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/petite-vue

接下來我們來看 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>

<!-- anywhere on the page -->
<div v-scope="{ count: 0 }">
  {{ count }}
  <button @click="count++">inc</button>
</div>

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

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

<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()
</script>

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

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/HN2FTTPK4I8WlPz5KDIIdA

猜你喜歡