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
    }
  })
}

// 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)
}

<template>
  <!-- 模板中自动解包：{{ count }} 而不是 {{ count.value }} -->
  <p>{{ count }}</p>
</template>

<script setup>
const { ref } = Vue
const count = ref(0)
console.log(count.value)  // 0（JS 中需 .value）
console.log(count)        // 0（devtools 中显示 0）
</script>

// 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%
})

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<style>
.panel { padding: 1rem; border: 1px solid #ddd; margin: 0.5rem 0; border-radius: 4px; }
.tag { display: inline-block; padding: 2px 8px; background: #42b883; color: white; border-radius: 4px; font-size: 0.85rem; margin-right: 4px; }
</style>

<div id="app">
  <div class="panel">
    <h4>1. isRef / isReactive 判断</h4>
    <p>count 是 ref? <span class="tag">{{ String(isRef(count)) }}</span></p>
    <p>state 是 reactive? <span class="tag">{{ String(isReactive(state)) }}</span></p>
    <p>plain 是 ref? <span class="tag">{{ String(isRef(plain)) }}</span></p>
  </div>

  <div class="panel">
    <h4>2. toRaw 取原始对象（去除 Proxy）</h4>
    <p>state.raw === state? <span class="tag">{{ String(state.raw === state) }}</span></p>
    <p>state.count = {{ state.count }}</p>
    <button @click="state.count++">+1 改 state.count</button>
  </div>

  <div class="panel">
    <h4>3. shallowRef 浅响应 + triggerRef 手动触发</h4>
    <p>users 第 0 项: {{ users[0].name }}</p>
    <button @click="mutateFirst">改 users[0].name（不触发更新）</button>
    <button @click="forceUpdate">triggerRef 手动触发</button>
  </div>
</div>

<script>
const { createApp, ref, reactive, shallowRef, triggerRef,
        isRef, isReactive, toRaw } = Vue

const App = {
  setup() {
    const count = ref(0)
    const state = reactive({ count: 0 })
    const plain = { count: 0 }
    const users = shallowRef([{ id: 1, name: 'Alice' }])

    function mutateFirst() {
      // ❌ 修改 .value 内部属性 → 不触发更新
      users.value[0].name = 'Bob'
      console.log('❌ 改完不触发更新')
    }

    function forceUpdate() {
      // ✅ 手动触发
      triggerRef(users)
      console.log('✅ triggerRef 已触发')
    }

    return { count, state, plain, users,
             isRef, isReactive,
             mutateFirst, forceUpdate }
  },
  template: `
    <div>
      <div class="panel">
        <h4>1. isRef / isReactive 判断</h4>
        <p>count 是 ref? <span class="tag">{{ String(isRef(count)) }}</span></p>
        <p>state 是 reactive? <span class="tag">{{ String(isReactive(state)) }}</span></p>
        <p>plain 是 ref? <span class="tag">{{ String(isRef(plain)) }}</span></p>
      </div>

      <div class="panel">
        <h4>2. toRaw 取原始对象</h4>
        <p>state.count = {{ state.count }}</p>
        <button @click="state.count++">+1</button>
      </div>

      <div class="panel">
        <h4>3. shallowRef + triggerRef</h4>
        <p>users 第 0 项: {{ users[0].name }}</p>
        <button @click="mutateFirst">改内部属性（不触发）</button>
        <button @click="forceUpdate">triggerRef 手动触发</button>
      </div>
    </div>
  `
}

createApp(App).mount('#app')
</script>

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app">
  <h3>手写 mini 响应式系统</h3>
  <p>state.count = {{ display }}</p>
  <button @click="state.count++">+1</button>
</div>

<script>
// mini Vue 响应式系统实现
const targetMap = new WeakMap()
let activeEffect = null

function track(target, key) {
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    depsMap = new Map()
    targetMap.set(target, depsMap)
  }
  let dep = depsMap.get(key)
  if (!dep) {
    dep = new Set()
    depsMap.set(key, dep)
  }
  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())
}

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      track(target, key)
      return Reflect.get(target, key)
    },
    set(target, key, value) {
      const result = Reflect.set(target, key, value)
      trigger(target, key)
      return result
    }
  })
}

// 演示
const state = reactive({ count: 0 })
let display = 0
activeEffect = () => { display = state.count; console.log('Render:', display) }
activeEffect()  // 初次收集依赖

// 绑定到页面
const App = {
  setup() { return { state, display } },
  template: `
    <div>
      <p>state.count = {{ display }}</p>
      <button @click="state.count++">+1（触发 track/trigger）</button>
    </div>
  `
}

createApp(App).mount('#app')
</script>

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

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)