1. Basic Cognition

1️⃣What is the execution time of setup?What is the difference between created?

🎯 Investigation: Life cycle understanding

💎 Advanced answer:

• setup is executed when the component instance is created
• Earlier than onBeforeMount
• Equivalent to Vue2’s beforeCreate + created
• no this
• Complete responsive creation before template rendering

Bonus points:

The essence of setup is the initialization phase before effect dependency collection.

2️⃣ What is the difference between ref and reactive?How to choose?

🎯 Examination: Responsive Understanding

💎 Answer structure:

compare	ref	reactive
Data type	Any	Object only
Access method	.value	Direct access
Replace the entire object	Supported	Not recommended

High-level summary:

Use ref for basic types Use reactive for structurally stable objects The object that needs to be replaced as a whole takes priority ref

3️⃣ Why can’t reactive be deconstructed directly?

🎯 Investigation: Responsive Loss Principle

💎 Reason:

• After destructuring, it becomes an ordinary variable
• Disengage from Proxy
• Lost dependency tracking

Solution:

toRefs()

4️⃣What is the difference between computed and watch?

🎯 Examination: Side Effects vs Derived State

💎 Advanced comparison:

computed	watch
Return value	None returned
Cache	Yes
Suitable for derived data	Suitable for side effects

In one sentence:

computed is a declarative derivation watch is an imperative side effect

5️⃣ What is the difference between watch and watchEffect?

🎯 Examine dependency collection mechanism

watch	watchEffect
Manually declare dependencies	Automatically collect dependencies
can get oldValue	cannot
Precise control	Easier

Advanced supplements:

watchEffect is essentially an effect that is executed immediately.

2. Advanced understanding category

6️⃣What is the use of flush in watch?

🎯 Examine the scheduling mechanism

flush: 'pre'   // 默认
flush: 'post'  // DOM更新后
flush: 'sync'  // 同步

High level answer:

DOM operation logic must use post, otherwise the updated DOM will not be obtained.

7️⃣ Why is Vue3 update asynchronous batch processing?

🎯 Examine the scheduling mechanism

Answer structure:

• Component updates are based on effects
• The update task enters the job queue
• Unified execution in microtasks
• Avoid re-rendering

8️⃣ What is the principle of nextTick?

🎯 Examine micro-task understanding

Advanced answer:

The essence of nextTick is to wait for the current update queue flush to complete.

9️⃣ What is the internal essence of the life cycle?

🎯 Examine underlying cognition

Answer:

The essence is effect callbacks registered at different stages.

🔟 Who is earlier, onMounted or watchEffect?

Answer:

• setup
• watchEffect (execute immediately)
• onMounted (after DOM is mounted)

3. Scenario questions (high frequency)

1️⃣1️⃣ When must watch be used instead of computed?

💎 Answer:

• send request
• write localStorage
• Manipulating the DOM
• Log reporting

In one sentence:

If you have side effects, you must use a watch.

1️⃣2️⃣ How to avoid watch infinite loop?

Common reasons:

• Modify the monitored value in watch

Solution:

• Use conditional judgment
• Use flush post
• separated state

1️⃣3️⃣ How to monitor reactive deep changes?

{ deep: true }

But advanced additions:

The deep monitoring performance is poor, and the state is split first.

1️⃣4️⃣ How to handle data refresh in KeepAlive scenario?

Use:

onActivated()

Common scenarios:

• List page cache
• tab page

1️⃣5️⃣ Will the watch be automatically destroyed after the component is uninstalled?

Answer:

✅ Will automatically clean up

Because:

watch is bound to the current component effect scope.

4. Architecture-level issues (widening the gap)

1️⃣6️⃣ What is effectScope?

Advanced answer:

effectScope is the mechanism used by Vue3 to manage the collection of side effects. The component itself is an effectScope.

Purpose:

• Create scope manually
• Destroy effects in batches

1️⃣7️⃣ Why do combined functions not leak memory?

Answer:

• Because the inner watch belongs to the current component scope
• Component uninstallation and automatic cleaning

1️⃣8️⃣ Why does Vue3 perform better than Vue2?

Answer structure:

• Proxy instead of defineProperty
• Accurate dependency collection
• static boost
• patch flag
• Compilation optimization

1️⃣9️⃣ How to avoid repeated dependency collection in Vue3?

Answer:

• Use activeEffect
• Use dependency map structure
• Deduplication collection

2️⃣0️⃣ How to design large-scale useXXX hooks?

Advanced answer structure:

• State layer (ref/reactive)
• Side Effect Layer (watch)
• Life cycle layer (onMounted)
• Externally exposed layer (return)

Example:

function useTable() {
  const data = ref([])
  const loading = ref(false)

  const fetchData = async () => {}

  onMounted(fetchData)

  return { data, loading }
}

5. What is your understanding of Vue3 hooks?

Vue3 hooks are essentially a responsive side effect system built on effect + scheduler.

ref/reactive is responsible for state, computed is responsible for derivation, watch is responsible for side effects, The essence of the life cycle is the effects registered at different stages.

All updates go through an asynchronous dispatch queue to avoid repeated rendering.

In large projects, we use useXXX combined functions for logic reuse, and use effectScope to manage the side effect life cycle.