尤大大新活 petite-vue 嚐鮮

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

前言

打開尤大大的GitHub，發現多了個叫 petite-vue 的東西，好傢伙，Vue3 和 Vite 還沒學完呢，又開始整新東西了？本着學不死就往死裏學的態度，咱仍是來瞅瞅這究竟是個啥東西吧，誰讓他是咱的祖師爺呢！html

簡介

從名字來看能夠知道 petite-vue 是一個 mini 版的vue，大小隻有5.8kb，能夠說是很是小了。據尤大大介紹，petite-vue 是 Vue 的可替代發行版，針對漸進式加強進行了優化。它提供了與標準 Vue 相同的模板語法和響應式模型：前端

大小隻有5.8kb
Vue 兼容模版語法
基於DOM，就地轉換
響應式驅動

上活

下面對 petite-vue 的使用作一些介紹。vue

簡單使用

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

經過 script 標籤引入同時添加 init ，接着就可使用 v-scope 綁定數據，這樣一個簡單的計數器就實現了。java

瞭解過 Alpine.js 這個框架的同窗看到這裏可能有點眼熟了，二者語法之間是很像的。react

<!-- Alpine.js -->
<div x-data="{ open: false }">
  <button @click="open = true">Open Dropdown</button>
  <ul x-show="open" @click.away="open = false">
    Dropdown Body
  </ul>
</div>
複製代碼

除了用 init 的方式以外，也能夠用下面的方式：web

<body>
  <div v-scope="{ count: 0 }">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>
  <!-- 放在body底部 -->
  <script src="https://unpkg.com/petite-vue"></script>
  <script>
    PetiteVue.createApp().mount()
  </script>
</body>
複製代碼

或使用 ES module 的方式：後端

<body>
  <script type="module"> import { createApp } from 'https://unpkg.com/petite-vue?module' createApp().mount() </script>
  
  <div v-scope="{ count: 0 }">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>  
</body>
複製代碼

根做用域

createApp 函數能夠接受一個對象，相似於咱們平時使用 data 和 methods 同樣，這時 v-scope 不須要綁定值。markdown

<body>
  <script type="module"> import { createApp } from 'https://unpkg.com/petite-vue?module' createApp({ count: 0, increment() { this.count++ }, decrement() { this.count-- } }).mount() </script>
  
  <div v-scope>
    <button @click="decrement">-</button>
    <span>{{ count }}</span>
    <button @click="increment">+</button>
  </div>
</body>
複製代碼

指定掛載元素

<body>
  <script type="module"> import { createApp } from 'https://unpkg.com/petite-vue?module' createApp({ count: 0 }).mount('#app') </script>
  
  <div id="app">
    {{ count }}
  </div>
</body>
複製代碼

生命週期

能夠監聽每一個元素的生命週期事件。app

<body>
  <script type="module"> import { createApp } from 'https://unpkg.com/petite-vue?module' createApp({ onMounted1(el) { console.log(el) // <span>1</span> }, onMounted2(el) { console.log(el) // <span>2</span> } }).mount('#app') </script>
  
  <div id="app">
    <span @mounted="onMounted1($el)">1</span>
    <span @mounted="onMounted2($el)">2</span>
  </div>
</body>
複製代碼

組件

在 petite-vue 裏，組件可使用函數的方式建立，經過template能夠實現複用。

<body>
  <script type="module"> import { createApp } from 'https://unpkg.com/petite-vue?module' function Counter(props) { return { $template: '#counter-template', count: props.initialCount, increment() { this.count++ }, decrement() { this.count++ } } } createApp({ Counter }).mount() </script>

<template id="counter-template">
  <button @click="decrement">-</button>
  <span>{{ count }}</span>
  <button @click="increment">+</button>
</template>

<!-- 複用 -->
<div v-scope="Counter({ initialCount: 1 })"></div>
<div v-scope="Counter({ initialCount: 2 })"></div>
</body>
複製代碼

全局狀態管理

藉助 reactive 響應式 API 能夠很輕鬆的建立全局狀態管理

<body>
  <script type="module"> import { createApp, reactive } from 'https://unpkg.com/petite-vue?module' const store = reactive({ count: 0, increment() { this.count++ } }) // 將count加1 store.increment() createApp({ store }).mount() </script>

  <div v-scope>
    <!-- 輸出1 -->
    <span>{{ store.count }}</span>
  </div>
  <div v-scope>
    <button @click="store.increment">+</button>
  </div>
</body>
複製代碼

自定義指令

這裏來簡單實現一個輸入框自動聚焦的指令。

<body>
  <script type="module"> import { createApp } from 'https://unpkg.com/petite-vue?module' const autoFocus = (ctx) => { ctx.el.focus() } createApp().directive('auto-focus', autoFocus).mount() </script>

  <div v-scope>
    <input v-auto-focus />
  </div>
</body>
複製代碼

內置指令

v-model
v-if / v-else / v-else-if
v-for
v-show
v-html
v-text
v-pre
v-once
v-cloak

注意：v-for 不須要key，另外 v-for 不支持深度解構

<body>
  <script type="module"> import { createApp } from 'https://unpkg.com/petite-vue?module' createApp({ userList: [ { name: '張三', age: { a: 23, b: 24 } }, { name: '李四', age: { a: 23, b: 24 } }, { name: '王五', age: { a: 23, b: 24 } } ] }).mount() </script>

  <div v-scope>
    <!-- 支持 -->
    <li v-for="{ age } in userList">
      {{ age.a }}
    </li>
    <!-- 不支持 -->
    <li v-for="{ age: { a } } in userList">
      {{ a }}
    </li>
  </div>
</body>
複製代碼

不支持

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

ref()、computed
render函數，由於petite-vue 沒有虛擬DOM
不支持Map、Set等響應類型
Transition, KeepAlive, Teleport, Suspense
v-on="object"
v-is &
v-bind:style auto-prefixing

總結

以上就是對 petite-vue 的一些簡單介紹和使用，拋磚引玉，更多新的探索就由大家去發現了。

總的來講，prtite-vue 保留了 Vue 的一些基礎特性，這使得 Vue 開發者能夠無成本使用，在以往，當咱們在開發一些小而簡單的頁面想要引用 Vue 但又經常由於包體積帶來的考慮而放棄，如今，petite-vue 的出現或許能夠拯救這種狀況了，畢竟它真的很小，大小隻有 5.8kb，大約只是 Alpine.js 的一半。

寫在最後

碼字不易，若是本文對你有什麼幫助或收穫，歡迎點贊，你的點贊是我創做的動力！