Pengantar petite-vue: Subset baru Vue

petite-vue sangat cocok bagi mereka yang akrab dengan Vue dan ingin menambahkan Vue ke proyek yang dirender di sisi server.

Dalam artikel ini, kita akan melihat apa yang dilakukan, cara kerjanya, dan bagaimana perbandingannya dengan Vue standar dan Alpine.js. Kita juga akan membahas cara memulai dan melihat beberapa kasus penggunaan. Ayo kita mulai!petite-vuepetite-vue.

Apa itu peningkatan progresif?

Peningkatan progresif adalah metodologi yang memungkinkan pengembang web untuk memulai pemrograman dengan HTML dan menyertakan teknologi lain sesuai kebutuhan. Kita dapat mulai membangun situs web secara statis hanya dengan HTML, lalu menambahkan interaktivitas atau negara klien ke halaman.

petite-vue dioptimalkan untuk interaksi kecil pada halaman HTML yang ada yang dirender oleh kerangka kerja server, oleh karena itu menyederhanakan peningkatan progresif. Mari kita lihat cara kerjanya!

Fitur mendasar dari petite-vue

Mari kita pahami cara kerjanya dengan melihat fitur-fitur mendasarnya.petite-vue

No build tooling

Kita cukup menyertakan dalam tag untuk mendapatkan fitur-fiturnya di halaman HTML:petite-vuescript

<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>

Ukuran bundel kecil

Versi terbaru Vue dan Alpine memiliki ukuran bundel masing-masing 22,9kB dan 9,9kB yang ditambang dan digosok. , di sisi lain, memiliki ukuran bundel 6,4kB dan dimaksudkan untuk menjadi ringan.petite-vue

Sintaks templat yang kompatibel dengan Vue

Pengembang yang sudah terbiasa dengan sintaks template Vue akan merasa mudah untuk bergerak antara dan Vue.petite-vue

Sebagai subset Vue itu sendiri, menggunakan sebagian besar sintaks Vue yang akrab. Misalnya, menggunakan template interpolasi seperti dan template pendengar acara seperti .petite-vuepetite-vue{{ count }} @click

Tidak ada DOM virtual

Tidak seperti Vue, React, dan sebagian besar perpustakaan dan kerangka kerja frontend lainnya, tidak menggunakan DOM virtual. Sebaliknya, ia bermutasi DOM di tempat.petite-vue

<div v-scope="{ count: 0 }">
  <div v-effect="$el.textContent = count"></div>
  <button @click="count++">++</button>
</div>