1. Commonly used Composition API Hooks in Vue3

The core of Vue3 is Composition API, and logic reuse revolves around setup().

1️⃣ Responsive related

① ref

Create basic types of responsive data.

const count = ref(0)

Features:

• Access using .value
• Automatic unpacking in templates

Applicable scenarios:

• basic type
• Need to replace the entire value

② reactive

Create objects reactive.

const state = reactive({ name: 'vue' })

Features:

• Cannot be deconstructed directly (responsiveness will be lost)
• Suitable for complex objects

③ computed

Computed properties.

const total = computed(() => count.value * 2)

Features:

• cache
• dependency tracking
• Support getter/setter

④ watch

Monitor data changes.

watch(count, (newVal, oldVal) => {})

Advanced usage:

watch(
  () => state.name,
  (val) => {},
  { immediate: true, deep: true }
)

Common parameters:

• immediate
• deep
• flush: 'post' | 'pre' | 'sync'

⑤ watchEffect

Automatically collect dependencies.

watchEffect(() => {
  console.log(count.value)
})

Difference:

watch	watchEffect
Manually specify dependencies	Automatically collect dependencies
can get oldValue	not

Suitable for side effect scenarios.

2️⃣ Life cycle Hooks

Vue3 lifecycle must be used in setup().

Mounting phase

Vue3	Description
onBeforeMount	Before mounting
onMounted	After mounting

onMounted(() => {
  console.log('DOM ready')
})

update stage

Vue3	Description
onBeforeUpdate	Before update
onUpdated	After updated

Unloading phase

Vue3	Description
onBeforeUnmount	Before unmounting
onUnmounted	After unmounting

Commonly used for:

• clear timer
• Cancel monitoring
• Release resources

Error catching

onErrorCaptured((err, instance, info) => {})

Similar to React’s ErrorBoundary.

KeepAlive related

Hook	Description
onActivated	Activated
onDeactivated	Deactivated

Applies to:

• Page cache recovery
• Refresh data

3️⃣ Component Communication Hooks

defineProps

const props = defineProps({
  msg: String
})

defineEmits

const emit = defineEmits(['change'])

defineExpose

Exposed to the parent component.

provide / inject

Cross-level communication.

provide('key', value)
inject('key')

Suitable for:

• form component
• theme system
• Plug-in mechanism

4️⃣ Other high-frequency Hooks

① nextTick

Executed after DOM update.

await nextTick()

② useAttrs

Get the transparent transmission properties.

③ useSlots

Get the slot.

④ getCurrentInstance

Get the component instance (for advanced scenarios).

2. Overall process of Vue3 life cycle

Vue3 life cycle process:

setup
↓
onBeforeMount
↓
onMounted
↓
onBeforeUpdate
↓
onUpdated
↓
onBeforeUnmount
↓
onUnmounted

3. Vue2 vs Vue3 life cycle comparison (high-frequency interviews)

Vue2	Vue3
beforeCreate	setup
created	setup
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted

Key points:

• 👉 Vue3 not created
• 👉 setup instead of beforeCreate + created

4. Bonus points for advanced answers

1️⃣ The essence of life cycle execution timing

The essence is based on:

• effect
• scheduler
• job queue

Vue3 update mechanism:

• Component updates are asynchronous batch processing
• Based on microtask queue

2️⃣ watch flush timing

flush: 'pre'   // 默认，DOM更新前
flush: 'post'  // DOM更新后
flush: 'sync'  // 同步执行

Advanced scenario:

• Manipulate DOM → use post
• Do synchronization logic → sync

3️⃣ setup execution timing

• Executed when the component instance is created
• Earlier than onBeforeMount
• None this

5. Summary of practical experience

• The core is ref/reactive/computed/watch.
• Use watchEffect to control side effects.
• Asynchronous requests are usually onMounted.
• Use onActivated for a large number of component caching scenarios.
• Complex form encapsulation uses provide/inject extensively.
• When optimizing performance, attention will be paid to the timing of use of watch flush and nextTick.