Vue Academy · Pelajaran

Asas Kereaktifan

Pelajari cara Vue menjejaki kebergantungan reaktif.

Pelajaran 1 daripada 313 langkah

Asas Kereaktifan ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 3. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 3 pelajaran.

Apakah Kereaktifan?

Kereaktifan ialah proses Vue mengemas kini DOM secara automatik apabila data anda berubah.

Anda mengubah nilai dalam JavaScript
Vue mengesan perubahan tersebut
Paparan diberikan semula agar sepadan

Tiada manipulasi DOM secara manual diperlukan.

Cara Vue Menjejak Kebergantungan

Vue menggunakan sistem penjejakan kebergantungan.

Apabila pemaparan membaca nilai reaktif, Vue merekodkan kebergantungan tersebut
Apabila nilai itu berubah kemudian, Vue mengetahui pemaparan yang perlu dijalankan semula
Ini menjadikan kemas kini tepat dan cekap

ref untuk Nilai Primitif

Dalam API Composition, ref menjadikan satu nilai reaktif.

import { ref } from "vue"

const count = ref(0)
const name = ref("Ada")

count.value++          // update via .value
console.log(name.value) // read via .value

ref dalam Templat

Dalam templat, ref dibuka secara automatik, jadi anda tidak perlu menggunakan .value.

<script setup>
import { ref } from "vue"
const count = ref(0)
</script>

<template>
  <p>{{ count }}</p>
  <button @click="count++">Add</button>
</template>

reactive untuk Objek

reactive menjadikan keseluruhan objek reaktif. Anda mengakses sifat secara langsung tanpa .value.

import { reactive } from "vue"

const state = reactive({
  count: 0,
  user: { name: "Ada" }
})

state.count++
state.user.name = "Grace"

ref berbanding reactive

Memilih antara kedua-duanya:

ref berfungsi untuk sebarang nilai (primitif dan objek), dan diakses dengan .value
reactive hanya untuk objek, dan diakses secara langsung

Banyak pasukan memilih ref untuk semua keadaan demi konsistensi.

Pilihan data (Vue 2 / API Options)

API Options menggunakan fungsi data. Setiap sifat yang dikembalikan adalah reaktif.

export default {
  data() {
    return {
      count: 0,
      items: []
    }
  },
  methods: {
    add() { this.count++ }
  }
}

Kaveat Kereaktifan dengan Tatasusunan

Penetapan indeks tatasusunan secara langsung boleh menjadi rumit, terutamanya dalam Vue 2.

Dalam Vue 2, penetapan arr[5] = x tidak mencetuskan kemas kini
Proksi Vue 3 mengendalikan kebanyakan keadaan, tetapi anda masih perlu berhati-hati

Utamakan kaedah tatasusunan demi kejelasan dan keselamatan.

Kaedah Tatasusunan Reaktif

Kaedah yang mengubah data seperti push, splice dan pop dijejaki secara reaktif.

const items = reactive([1, 2, 3])

items.push(4)        // reactive
items.splice(0, 1)   // reactive

// Replacing an index in Vue 3 proxy:
items[0] = 99        // works in Vue 3

Menggantikan berbanding Mengubah

Dua cara untuk mengemas kini tatasusunan:

Ubah dengan push, splice dan sort
Ganti dengan menetapkan tatasusunan baharu, contohnya daripada filter atau map

Kedua-duanya mencetuskan kereaktifan dalam Vue 3. Penggantian selalunya lebih kemas untuk senarai terbitan.

// Mutate
state.list.push(item)

// Replace with a filtered copy
state.list = state.list.filter(x => x.active)

Mengelakkan Kehilangan Kereaktifan

Penyahstrukturan objek reaktif memutuskan kereaktifan bagi pemboleh ubah tersebut.

Mengeluarkan sifat menyalin nilai semasanya
Gunakan toRefs untuk mengekalkan kereaktifan semasa menyahstruktur

import { reactive, toRefs } from "vue"

const state = reactive({ count: 0 })

// Keeps reactivity
const { count } = toRefs(state)

Semakan Pantas

Uji pemahaman anda tentang kereaktifan Vue.

Jawab dalam pelajaran interaktif

Imbas Kembali: Asas Kereaktifan

Anda telah mempelajari cara kereaktifan Vue berfungsi:

Vue menjejaki data yang digunakan oleh setiap pemaparan
ref menjadikan nilai reaktif (gunakan .value dalam JS)
reactive menjadikan objek reaktif (akses secara langsung)
API Options menggunakan fungsi data
Gunakan kaedah tatasusunan dan toRefs untuk mengelakkan kehilangan kereaktifan

Seterusnya: sifat terhitung.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 42
Pelajaran: 156

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Asas Kereaktifan” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “Asas Kereaktifan”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 3 pelajaran.

Apakah yang akan saya pelajari dalam “Asas Kereaktifan”?

Pelajari cara Vue menjejaki kebergantungan reaktif. Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 3.

Berapa lamakah pelajaran “Asas Kereaktifan” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy