Vue.js / Nuxt.js

Vue Reactivity

Reactivity system, reactive vs ref, toRef, toRefs, unref, shallow reactivity, readonly

20 คำถามสัมภาษณ์·
Mid-Level
1

What is Vue's reactivity system?

คำตอบ

Vue's reactivity system automatically detects changes in data and updates the DOM accordingly. It relies on JavaScript Proxies that intercept property access and modifications. This system ensures the user interface stays synchronized with the application state without manual intervention.

2

What is the main difference between ref() and reactive()?

คำตอบ

ref() creates a reactive reference for a primitive value or object, accessible via .value, while reactive() creates a reactive proxy of an object without requiring .value to access properties. ref() is universal (primitives + objects) and ideal for simple values, while reactive() is optimized for objects but doesn't work with primitives. In practice, ref() is often preferred as it works with all types.

3

How to access the value of a ref in the template vs in the script?

คำตอบ

In the template, Vue automatically unwraps refs, allowing direct access without .value (e.g., {{ count }}). In the script, you must use .value to read or modify the ref's value (e.g., count.value++). This automatic behavior in templates simplifies code writing while maintaining explicit control in JavaScript logic.

4

What happens if you destructure a reactive() object?

5

What is the purpose of toRefs() in Vue?

+17 คำถามสัมภาษณ์

เชี่ยวชาญ Vue.js / Nuxt.js สำหรับการสัมภาษณ์ครั้งถัดไป

เข้าถึงคำถามทั้งหมด flashcards แบบทดสอบเทคนิค แบบฝึกหัด code review และตัวจำลองสัมภาษณ์

เริ่มใช้ฟรี