1. Responsive Hooks - core business layer

1️⃣ ref - basic status & replaceable value

✅ Actual combat scenarios

Scenario 1: Form control value

const keyword = ref('')

Reason:

• basic type
• Need to be replaced entirely
• Two-way binding

Scenario 2: DOM reference

const inputRef = ref(null)

onMounted(() => {
  inputRef.value.focus()
})

👉 ref is necessary in DOM scenes

Scenario 3: loading / visible control

const loading = ref(false)
const dialogVisible = ref(false)

For all Boolean control classes, ref is preferred.

2️⃣ reactive - complex object state management

✅ Actual combat scenarios

Scenario 1: Complex form

const form = reactive({
  name: '',
  age: '',
  address: {
    city: ''
  }
})

Reason:

• The object structure is stable
• Need deep responsiveness

Scenario 2: Large page state container

For example:

• Complex filter conditions
• Table pagination
• Statistics panel

const state = reactive({
  filter: {},
  pagination: {},
  list: []
})

👉 Suitable for "state container style" writing.

3️⃣ computed —— derived state

✅ Actual combat scenarios

Scenario 1: Filter data

const filteredList = computed(() =>
  list.value.filter(item => item.name.includes(keyword.value))
)

Advantages:

• Automatic caching
• Avoid double counting

Scenario 2: Permission control

const canEdit = computed(() =>
  userRole.value === 'admin'
)

👉 It is strongly recommended to use computed instead of watch for the permission class.

2. watch / watchEffect - side effect control layer

4️⃣ watch——precise monitoring

✅ Scenario 1: Interface linkage

watch(page, () => {
  fetchList()
})

Pagination changes → auto-request.

✅ Scenario 2: Routing changes

watch(
  () => route.params.id,
  (id) => {
    fetchDetail(id)
  }
)

Commonly used in detail pages.

✅ Scenario 3: Deep monitoring of complex objects

watch(
  () => form,
  () => saveDraft(),
  { deep: true }
)

Applies to:

• Automatically save drafts
• Real-time synchronization

5️⃣ watchEffect - automatic dependency collection

✅ Scenario 1: Automatic request on the first screen

watchEffect(() => {
  fetchDetail(route.params.id)
})

No need to declare dependencies manually.

✅ Scenario 2: Log/Burying System

watchEffect(() => {
  trackPage(route.path)
})

Automatically triggered by dependency changes.

3. Practical combat of life cycle Hooks

6️⃣ onMounted —— High frequency use

✅ Scenario

• Initialization interface
• Initialize chart
• Register to listen

onMounted(() => {
  fetchList()
  window.addEventListener('resize', handleResize)
})

7️⃣ onUnmounted —— Resource release

✅ Scenario

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  clearInterval(timer)
})

👉 High frequency memory leak point.

8️⃣ onActivated / onDeactivated —— KeepAlive

✅ Scenario: List page caching

onActivated(() => {
  refreshIfNeeded()
})

In:

• tab page
• Multi-level caching system
• Mobile multi-page switching

Very common.

4. Component Communication Hooks Practical Combat

9️⃣ provide / inject - complex component system

✅ Scenario 1: Form component encapsulation

Parent component:

provide('formContext', form)

Subcomponents:

const form = inject('formContext')

Commonly found in:

• Form verification system
• Form item registration mechanism
• Complex UI component library encapsulation

✅ Scenario 2: Theme system

provide('theme', themeConfig)

🔟 defineExpose - component external API

Applies to:

• Pop-up component
• form component
• chart component

defineExpose({
  open,
  close
})

Parent components can be called via ref.

5. Advanced Scenarios (Extra Points)

1️⃣ Timing of using watch flush

watch(data, callback, { flush: 'post' })

Usage scenarios:

• Depends on DOM updates
• Chart refresh
• Need to get updated dimensions

2️⃣ nextTick usage scenarios

await nextTick()

Used for:

• Need to get the real DOM size
• Manipulate scroll bars
• Input box focus

3️⃣ getCurrentInstance - plug-in development

Applies to:

• Get proxy
• Global mounting method
• Frame layer encapsulation

👉 Use business code as little as possible.

6. "Combined function" model in enterprise-level projects (really advanced)

Encapsulate useXXX hooks

For example:

function usePagination() {
  const page = ref(1)
  const pageSize = ref(10)

  return { page, pageSize }
}

In the project you can say:

We abstract the business logic into useXXX hooks to form a reusable logic layer, such as:

• useTable
• useForm
• useRequest
• usePermission
• useResizeObserver

👉 This is the advanced front-end flag.

7. Which Vue3 hooks are most used in your project?

The core is ref / reactive for state management. computed does derived data, watch controls side effects, onMounted does initialization, onUnmounted controls resource release, In large systems, a logical reuse system is formed by encapsulating useXXX hooks.

Performance-sensitive scenarios will focus on watch flush timing and effect batch update mechanism.

8. Add an architecture level

Vue3 hooks are essentially a responsive side effect system built on effect + scheduler. All life cycles and watches are essentially different scheduling timings of effects.