動畫搞懂petite-vue

「本文已參與好文召集令活動，點擊查看：後端、大前端雙賽道投稿，2萬元獎池等你挑戰！」javascript

最近Vue家族再添新丁，petite-vue。先糾正讀音html

幸好找到了合適的英語要否則繼vue和vite後下一個法語框架誕生了。前端

特色

打包後只有5.7k超小超輕。相比競爭對手Alpine.js精簡一半。vue

主要用於服務器端渲染頁面的點綴性功能。java

什麼叫服務器端渲染點綴功能

目前主流的mvvm框架好比vue和react都是發力在SPA領域。廣泛會基於工程化、組件化方式編寫。可是這種技術若是隻是想在一個服務器端渲染的頁面中實現一點功能就顯的即爲笨拙。好比你要實現一個最簡單的counter計數器。寫法大概是react

<script crossorigin="anonymous" src="https://lib.baomitu.com/vue/3.1.4/vue.global.js" ></script>
<div id="counter">
  Counter: {{ counter }}
  <button @click="counter++">inc</button>
</div>

<script> const Counter = { data() { return { counter: 0, }; }, }; Vue.createApp(Counter).mount("#counter"); </script>

複製代碼

複合API也並無簡單多少。jquery

<script crossorigin="anonymous" src="https://lib.baomitu.com/vue/3.1.4/vue.global.js" ></script>
<div id="counter">
  Counter: {{ counter }}
  <button @click="counter++">inc</button>
</div>

<script> const Counter = { data() { return { counter: 0, }; }, }; Vue.createApp(Counter).mount("#counter"); </script>

複製代碼

建立實例，建立組件，設置響應式數據一個都不能少。後端

假設只想作一點件但邏輯真不如jquery香呢？服務器

好下面輪到pretite出廠了markdown

<script src="https://unpkg.com/petite-vue" defer init></script>
<div v-scope="{ count: 0 }">  
  {{ count }}
  <button @click="count++">inc</button>
</div>
複製代碼

在代碼中引入了

首先引用代碼的時候

這裏解釋一下defer和init

defer是用來讓下載腳本的過程不去阻塞DOM的渲染和其餘資源的加載。同時保證Dom解析後纔去執行腳本。這部分對後面的init很是關關鍵

init是爲了讓你petitevue進行自動實例化固然你也能夠手動實例化。若是隻是簡單的點綴代碼固然是越簡單越好了，因此這裏面就直接init就能夠了。

根做用域這樣一個東西在裏面能夠直接聲明你的響應式數據模型

而後就能夠在這個代碼段內直接綁定數據模型中的數據而且經過經過@click指令操縱數據。

怎麼樣是否是很方便的。

他特別適合在服務器渲染的代碼中增長一些簡單的前端互動功能。這個也就是所謂的點綴的意思。

全家桶怎麼弄？

全家桶是vue在進行規模化應用的時候的必備。

主要分爲

統一狀態管理
路由功能

首先若是你的使用場景是用於簡單的頁面，路由這種複雜視圖切換其實沒有什麼太大必要。

可是對於多個做用域間共享數據是須要的。

下面咱們就用一個例子來講明一下，

其實在vue3時代直接利用reactive建立的響應式數據自己就能夠達到視圖隨數據變化響應的要求。因此咱們只須要將須要共享的數據聲明在全局就能夠了。

下面看實例；

<script type="module"> import { createApp, reactive } from 'https://unpkg.com/petite-vue?module' const store = reactive({ count: 0, increment() { this.count++; }, }); console.log('store',store) // 將count加1 setInterval(() => store.increment() , 100) store.increment(); createApp({ store, }).mount(); </script>
<div v-scope style="border: 3px solid">
  <!-- 輸出1 -->
  <span style="font-size: 50px;">{{ store.count }}</span>
</div>
<br />
<br />
<br />
<div v-scope="{c2 : 10}" style="border: 3px solid">
  <!-- 輸出1 -->
  <span style="font-size: 50px">{{ store.count }}: {{c2}}</span>
</div>
<br />
<br />
<br />
<div v-scope style="border: 3px solid">
  <button @click="store.increment">inc</button>
</div>
複製代碼

哪些特性不支持了，影響大嗎？

爲了體積小巧，Petite拋棄了不少沒必要要的功能。可是這些功能對於簡單的vue應用影響不是很大。

爲了更輕量小巧，petite-vue 不支持如下特性：

ref()、computed

實際上ref和computed這兩個屬性，只有在規模化應用中才會出現並且，也可使用reactivy替代，因此這部分影響不大
render函數，由於petite-vue 沒有虛擬DOM

簡單應用無需考慮性能問題
不支持Map、Set等響應類型

簡單應用問題不大。
Transition, KeepAlive, Teleport, Suspense

須要這些的時候仍是SPA吧

【Vue3官方教程】🎄萬字筆記 | 同步導學視頻

這個庫完善嗎，如今能夠在生產中使用嗎？

先說結論，不晚上可是能夠進行生產使用。

首先這個庫並非很完善，感受是尤大神在很短期內寫完了，甚至咱們在這個庫中沒有看到一行測試用例。

可是若是隻是用於簡單的服務器端渲染點綴由於功能簡單，功能幾乎一目瞭然，因此無需擔憂有什麼隱藏的大坑，收穫的確實慢慢的簡潔高效。因此我以爲立刻用起來是沒有問題的。

尤大神爲何能夠閃電般開發出PetiteVue

首先是基於尤大神對於mvvm深厚的理解。廢話這個95%都是人家本身寫的並且寫了三遍(Vue,Vue二、Vue3)如今是第四遍了。

其次來說尤大神踐行了，本身在vueconf2021中提出的Vue3 + Vite的現代前端開發模式。

Vue3 + Vite = Modern by Default

工程化交給Vite -- 安心使用TS + Esmodule

此次Petite能夠說徹底開發從開發，編譯，發佈、Demo所有使用Vite，能夠說是給Vite的是實用性作了一次實實在在的背書和範例。

固然編譯和調試在底層是由由esbuild和rollup完成的。

「esbuild」來實現對 .ts、jsx、.js 代碼的轉化

這樣幾乎無需過多工程化搭建過程就獲得了一個完整的ts開發環境。
基於優秀的vue3代碼工程化 -- 無需重複造輪子

vue3代碼中使用monorepo風格將reactivity響應式，render，compile進行了有效模塊化分割。每一個部分能夠分開使用。此次petiteVue就是使用vue3核心的reactivity這個包來實現響應式，無需重複造輪子固然事半功倍。

固然優於petite中採用【就地編譯】和無虛擬Dom渲染方式沒辦法複用vue3。

正式優於以上三點，深厚的理解加上好用的構建工具以及能夠重複使用的輪子使得尤大神高效的研發除了這個實用的工具。

往期文章

【Vue3官方教程】🎄萬字筆記 | 同步導學視頻

[Vue官方教程筆記]- 尤雨溪手寫mini-vue

如何參加開源項目-如何給Vue3.0提PR

作了一晚上動畫，讓你們十分鐘搞懂Webpack