Vue Academy · บทเรียน

พื้นฐานรีแอกทีฟ

เรียนรู้วิธีที่ Vue ติดตามการขึ้นต่อกันแบบรีแอกทีฟ

พื้นฐานรีแอกทีฟ เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน

การทำงานแบบรีแอกทีฟคืออะไร

การทำงานแบบรีแอกทีฟ คือการที่ Vue อัปเดต DOM โดยอัตโนมัติเมื่อข้อมูลของคุณเปลี่ยนแปลง

คุณเปลี่ยนค่าใน JavaScript
Vue ตรวจพบการเปลี่ยนแปลง
มุมมองจะเรนเดอร์ใหม่ให้สอดคล้องกัน

ไม่จำเป็นต้องจัดการ DOM ด้วยตนเอง

Vue ติดตามการพึ่งพาอย่างไร

Vue ใช้ระบบติดตามการพึ่งพา

เมื่อการเรนเดอร์อ่านค่าที่มีการตอบสนอง Vue จะบันทึกการพึ่งพานั้น
เมื่อค่านั้นเปลี่ยนในภายหลัง Vue จะรู้ว่าต้องเรียกใช้การเรนเดอร์ใดอีกครั้ง
ทำให้การอัปเดตแม่นยำและมีประสิทธิภาพ

ref สำหรับค่าพื้นฐาน

ใน Composition API ref ใช้ทำให้ค่าเดียวมีการตอบสนอง

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 ในเทมเพลต

ในเทมเพลต ref จะถูกแกะค่าโดยอัตโนมัติ คุณจึงไม่ต้องเขียน .value

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

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

reactive สำหรับออบเจ็กต์

reactive ใช้ทำให้ออบเจ็กต์ทั้งก้อนมีการตอบสนอง คุณเข้าถึงพร็อพเพอร์ตีได้โดยตรงโดยไม่ต้องใช้ .value

import { reactive } from "vue"

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

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

ref กับ reactive

การเลือกใช้งานระหว่างทั้งสองแบบ

ref ใช้ได้กับค่าทุกชนิด ทั้งค่าพื้นฐานและออบเจ็กต์ โดยเข้าถึงผ่าน .value
reactive ใช้ได้เฉพาะกับออบเจ็กต์ โดยเข้าถึงได้โดยตรง

หลายทีมเลือกใช้ ref กับทุกค่าเพื่อให้สอดคล้องกัน

ตัวเลือก data (Vue 2 / Options API)

Options API ใช้ฟังก์ชัน data พร็อพเพอร์ตีทุกตัวที่ส่งคืนมาจะมีการตอบสนอง

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

ข้อควรระวังเรื่องการตอบสนองกับอาร์เรย์

การกำหนดค่าให้ดัชนีของอาร์เรย์โดยตรงอาจทำงานซับซ้อน โดยเฉพาะใน Vue 2

ใน Vue 2 การกำหนดค่า arr[5] = x ไม่ทำให้เกิดการอัปเดต
พร็อกซีของ Vue 3 รองรับกรณีส่วนใหญ่ แต่ก็ควรใช้อย่างระมัดระวัง

ควรใช้เมธอดของอาร์เรย์เพื่อให้โค้ดชัดเจนและปลอดภัย

เมธอดของอาร์เรย์แบบมีการตอบสนอง

เมธอดที่เปลี่ยนแปลงข้อมูล เช่น push, splice และ pop จะถูกติดตามแบบมีการตอบสนอง

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

การแทนที่กับการเปลี่ยนแปลงข้อมูล

มีสองวิธีในการอัปเดตอาร์เรย์

เปลี่ยนแปลงข้อมูลด้วย push, splice และ sort
แทนที่ด้วยการกำหนดอาร์เรย์ใหม่ เช่น อาร์เรย์ที่ได้จาก filter หรือ map

ทั้งสองวิธีทำให้เกิดการตอบสนองใน Vue 3 การแทนที่มักชัดเจนกว่าสำหรับรายการที่สร้างจากข้อมูลอื่น

// Mutate
state.list.push(item)

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

การหลีกเลี่ยงการสูญเสียการตอบสนอง

การแยกค่าจากออบเจ็กต์ที่มีการตอบสนองด้วยการทำลายโครงสร้างจะทำให้ตัวแปรเหล่านั้นสูญเสียการตอบสนอง

การดึงพร็อพเพอร์ตีออกมาจะคัดลอกค่าปัจจุบันของพร็อพเพอร์ตีนั้น
ใช้ toRefs เพื่อคงการตอบสนองไว้เมื่อทำลายโครงสร้าง

import { reactive, toRefs } from "vue"

const state = reactive({ count: 0 })

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

ตรวจสอบความเข้าใจ

ทดสอบความเข้าใจของคุณเกี่ยวกับการทำงานแบบรีแอกทีฟของ Vue

ทบทวน: พื้นฐานการทำงานแบบรีแอกทีฟ

คุณได้เรียนรู้ว่าการทำงานแบบรีแอกทีฟของ Vue ทำงานอย่างไร

Vue ติดตามว่าการเรนเดอร์แต่ละครั้งใช้ข้อมูลใด
ref ใช้ทำให้ค่าต่าง ๆ มีการตอบสนอง (ใช้ .value ใน JS)
reactive ใช้ทำให้ออบเจ็กต์มีการตอบสนอง (เข้าถึงได้โดยตรง)
Options API ใช้ฟังก์ชัน data
ใช้เมธอดของอาร์เรย์และ toRefs เพื่อหลีกเลี่ยงการสูญเสียการตอบสนอง

ถัดไป: พร็อพเพอร์ตีคำนวณ

คำถามที่พบบ่อย

บทเรียน “พื้นฐานรีแอกทีฟ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “พื้นฐานรีแอกทีฟ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “พื้นฐานรีแอกทีฟ”

เรียนรู้วิธีที่ Vue ติดตามการขึ้นต่อกันแบบรีแอกทีฟ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน

บทเรียน “พื้นฐานรีแอกทีฟ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Vue Academy