Vue.js: 响应式原理深挖

// ❌ 翻车版：deep reactive 处理 10 万行
const { ref } = Vue

const products = ref([
  { id: 1, name: 'Product 1', price: 99, ... },
  // ... 10,000 项 ...
])

// Vue 给每个属性、嵌套对象都创建 Proxy
// 内存占用：100MB+
// 首次渲染：3 秒
// 滚动：10 FPS（卡顿）

const { shallowRef, markRaw } = Vue

// ✅ shallowRef：只跟踪 .value 整体替换
const products = shallowRef([
  { id: 1, name: 'Product 1' },
  // ... 10,000 项（不会被 Proxy 包装）...
])

// ✅ markRaw：标记对象永远不响应（最快）
const staticConfig = markRaw({
  apiUrl: 'https://api.example.com',
  version: '1.0'
})

// 整体替换
products.value = await fetchProducts()  // 只触发 1 次更新

// 基础 Proxy 示例
const target = { name: 'Alice', age: 25 }

const proxy = new Proxy(target, {
  get(target, key) {
    console.log(`Read ${key}`)
    return Reflect.get(target, key)
  },
  set(target, key, value) {
    console.log(`Write ${key} = ${value}`)
    return Reflect.set(target, key, value)
  }
})

proxy.name  // 输出 "Read name"，返回 'Alice'
proxy.age = 26  // 输出 "Write age = 26"

// Vue 3 内部 reactivity 包的简化实现
function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      // 1. 依赖收集：记录谁在用这个属性
      track(target, key)
      
      // 2. 递归包装：嵌套对象也变响应式
      const value = Reflect.get(target, key, receiver)
      if (isObject(value)) {
        return reactive(value)
      }
      return value
    },
    set(target, key, value, receiver) {
      // 1. 设置值
      const oldValue = target[key]
      const result = Reflect.set(target, key, value, receiver)
      
      // 2. 触发更新：通知所有用这个属性的地方
      if (oldValue !== value) {
        trigger(target, key)
      }
      return result
    }
  })
}

三个面板自上而下：
1) count 是 ref? true、state 是 reactive? true、plain 是 ref? false；
2) state.count = 0，点「+1」后变 1；
3) users 第 0 项: Alice。
先点「改内部属性（不触发）」文字仍是 Alice，再点「triggerRef 手动触发」才变成 Bob。

// Vue 3 内部数据结构
const targetMap = new WeakMap()
// targetMap = { obj1: Map1, obj2: Map2, ... }
// Map1 = { key1: Set1, key2: Set2, ... }
// Set1 = Set<activeEffect1, activeEffect2, ...>

function track(target, key) {
  // 1. 获取 target 对应的 Map
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    depsMap = new Map()
    targetMap.set(target, depsMap)
  }
  
  // 2. 获取 key 对应的 Set
  let dep = depsMap.get(key)
  if (!dep) {
    dep = new Set()
    depsMap.set(key, dep)
  }
  
  // 3. 记录当前激活的 effect
  if (activeEffect) {
    dep.add(activeEffect)
  }
}

function trigger(target, key) {
  const depsMap = targetMap.get(target)
  if (!depsMap) return
  
  const dep = depsMap.get(key)
  if (dep) {
    // 通知所有依赖重新执行
    dep.forEach(effect => effect.run())
  }
}

// Vue 3 ref 内部实现
class RefImpl {
  constructor(value) {
    this._value = isObject(value) ? reactive(value) : value
  }
  
  get value() {
    // 1. track
    track(this, 'value')
    return this._value
  }
  
  set value(newValue) {
    // 1. 比较新旧值
    if (hasChanged(this._value, newValue)) {
      this._value = isObject(newValue) ? reactive(newValue) : newValue
      // 2. trigger
      trigger(this, 'value')
    }
  }
}

function ref(value) {
  return new RefImpl(value)
}

// Vue 3 computed 简化实现
function computed(getter) {
  const ref = {
    // 1. 缓存值
    _value: undefined,
    
    // 2. 是否过期（需要重算）
    _dirty: true,
    
    // 3. getter
    get value() {
      // 懒计算：只在第一次访问时算
      if (this._dirty) {
        this._value = effect(getter)  // 收集依赖
        this._dirty = false
      }
      
      // 4. track（自己被谁用）
      track(this, 'value')
      return this._value
    }
  }
  
  // 5. 当依赖变化时，标记 dirty
  effect(() => getter()).scheduled = () => {
    ref._dirty = true
    trigger(ref, 'value')  // 触发用 computed 的组件更新
  }
  
  return ref
}

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

console.log(double.value)  // 0（第一次计算）
console.log(double.value)  // 0（缓存，不重算）
count.value = 5
console.log(double.value)  // 10（重算）

const { shallowRef, triggerRef } = Vue

const products = shallowRef([
  { id: 1, name: 'iPhone', price: 999 },
  { id: 2, name: 'MacBook', price: 2499 }
])

// ❌ 不响应（修改 .value 内部属性）
products.value[0].name = 'iPad'
// 不会触发更新（shallowRef 只跟踪 .value 整体替换）

// ✅ 触发更新（整体替换）
products.value = [...products.value, { id: 3, name: 'iPad' }]

// ✅ 强制触发（修改内部后手动 trigger）
products.value[0].name = 'iPad'
triggerRef(products)

const { shallowReactive } = Vue

const state = shallowReactive({
  user: { name: 'Alice' },
  settings: { theme: 'dark' }
})

// ✅ 响应：顶层属性变化
state.user = { name: 'Bob' }

// ❌ 不响应：嵌套属性
state.user.name = 'Charlie'

const { markRaw, reactive } = Vue

// 第三方库实例（如 ECharts、Mapbox）不需要响应式
const map = markRaw(new Map())
const chart = markRaw(echarts.init(element))

const state = reactive({
  map,    // ✅ 不会被 Proxy 包装
  chart   // ✅ 性能提升 30%
})

const { triggerRef, isRef, isReactive, isReadonly, isProxy, toRaw, markRaw } = Vue

// 1. watchEffect 打印依赖
watchEffect(() => console.log('依赖:', { a: state.a, b: state.b }))

// 2. 手动触发更新
triggerRef(stateRef)

// 3. 检查响应式状态
isReactive(obj)   // true/false
isRef(refObj)     // true/false

// 4. 原始对象（去除 Proxy）
const raw = toRaw(reactiveObj)

// 5. 性能标记
const fast = markRaw(expensiveObj)

这段是速查代码，不渲染页面，结果都输出到控制台。
watchEffect 首次运行打印「依赖: { a: ..., b: ... }」，之后 state.a / state.b 变化时会再打印一次。
isReactive / isRef 返回 true 或 false；toRaw 得到不含 Proxy 的原始对象；markRaw 之后的对象不再被追踪。

页面标题「手写 mini 响应式系统」，下面一行「state.count = 0」，再下面是按钮「+1（触发 track/trigger）」。
页面加载时控制台已打印一次「Render: 0」（activeEffect 首次执行，完成依赖收集）。
点击 +1 → state.count 变成 1，控制台打印「Render: 1」。

const { ref, reactive, shallowRef, markRaw, isRef, isReactive, toRaw } = Vue

// ref：包装任何值
const count = ref(0)
console.log(isRef(count))   // true

// reactive：包装对象
const state = reactive({ count: 0 })
console.log(isReactive(state))   // true

// shallowRef：浅层
const list = shallowRef([1, 2, 3])

// markRaw：永久不响应
const map = markRaw(new Map())

// toRaw：去除 Proxy
const raw = toRaw(state)
console.log(raw === state)   // false

控制台依次打印三行：
true    // isRef(count)
true    // isReactive(state)
false   // raw === state，toRaw 拿到的是不带 Proxy 的原始对象