Vue3 完全指南

什么是响应式系统？

Vue3 的响应式系统是其核心特性之一，它允许当数据发生变化时，视图自动更新。这意味着开发者可以专注于数据逻辑，而不必手动操作 DOM。

Vue3 响应式系统的实现原理

Vue3 使用 Proxy API 实现响应式系统，相比 Vue2 的 Object.defineProperty，具有以下优势：

• 能够监听对象的所有属性，包括新增和删除的属性
• 能够监听数组的所有操作，包括索引访问和长度变化
• 支持 Map、Set、WeakMap、WeakSet 等集合类型
• 性能更好，尤其是在大型对象上

核心 API

import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  name: 'Vue3'
})

console.log(state.count) // 0
state.count++
console.log(state.count) // 1

import { ref, computed } from 'vue'

const count = ref(0)
const doubleCount = computed(() => count.value * 2)

console.log(doubleCount.value) // 0
count.value++
console.log(doubleCount.value) // 2

import { ref, watch } from 'vue'

const count = ref(0)

watch(count, (newValue, oldValue) => {
  console.log(`count 从 ${oldValue} 变为 ${newValue}`)
})

count.value++ // 输出: count 从 0 变为 1

响应式系统的工作流程

1. 当创建响应式对象时，Vue3 会使用 Proxy 包装原始对象
2. 当访问响应式对象的属性时，会触发 getter，收集依赖
3. 当修改响应式对象的属性时，会触发 setter，通知所有依赖更新
4. 依赖更新会导致相关的组件重新渲染

注意事项

• ref() 创建的响应式对象需要通过 .value 访问和修改
• reactive() 只能用于对象类型，不能用于基本类型
• 解构 reactive() 创建的对象会失去响应性，需要使用 toRefs() 或 toRef() 处理
• 响应式系统只能监听同步变化，异步变化需要特殊处理