Pengantar petite-vue: Subset baru Vue

date 10 Aug 2021
date Lev Yasin
date 43
date Web Programming
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

Vue standar menggunakan fungsi render, memungkinkannya untuk dirender pada platform selain web. mungil-vue berjalan di halaman web dan karena itu membisukan DOM secara langsung. Akibatnya, mungil-vue tidak memerlukan kompilasi, mengurangi ukuran keseluruhan.

Didorong oleh @vue/reactivity

Paket ini bertanggung jawab untuk reaktivitas Vue dan Alpine. menggunakan teknik reaktivitas yang sama ini.@vue/reactivitypetite-vue

Bagaimana membandingkan dengan Vue standarpetite-vue

petite-vue mirip dengan Vue dalam banyak hal. Seperti disebutkan, ia menyediakan sintaks dan model template yang sama yang disediakan oleh Vue standar. Namun, perbedaan yang paling signifikan adalah yang dibuat untuk peningkatan progresif.@vue/reactivitypetite-vue

Vue standar dirancang untuk menggunakan langkah build untuk membangun aplikasi satu halaman (SPAs) dengan interaksi berat. Ini menggunakan fungsi render untuk menggantikan template DOM yang ada. , di sisi lain, berjalan di DOM yang ada dan membisukannya di tempat, sehingga tidak memerlukan langkah membangun.Petite-vue

petite-vue fitur eksklusif

petite-vue memperkenalkan beberapa fitur baru yang tidak tersedia dalam Vue standar yang membantu dalam mengoptimalkan peningkatan progresif. Ayo kita lihat mereka!

v-scope

Dalam , itu adalah arahan yang menandai wilayah halaman yang dikendalikan oleh . Kita juga dapat menggunakan direktif untuk meneruskan di negara bagian yang akan diakses oleh wilayah tertentu di halaman Kita.petite-vuev-scopepetite-vuev-scope

v-effect

v-effect adalah arahan yang digunakan untuk mengeksekusi pernyataan reaktif inline di . Dalam cuplikan kode di bawah ini, variabel reaktif, sehingga akan diulang setiap kali hitungan berubah, lalu perbarui dengan nilai saat ini :petite-vuecountv-effectdivcount

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

Lev Yasin

Instruktur Web Programming Mataweb

Sangat tertarik dengan dunia Pemrograman Web & Mobile, saat ini fokus pada bagian Backend Web Developer, menggunakan PHP sebagai bahasa pemrograman utama, biasanya saya menggunakan Laravel.

Artikel Terkait

Halo, ada yang bisa kami bantu?