Vue.js: Reatividade em Profundidade

// ❌ The "Broken" Version:deep reactive Processing 10 Ten Thousand Lines
import { ref } from 'vue'

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

// Vue For each property、All nested objects are created Proxy
// Memory Usage:100MB+
// First Render: 3s
// Scroll:10 FPS(Lag)

import { shallowRef, markRaw } from 'vue'

// ✅ shallowRef:Follow Only .value Replace All
const products = shallowRef([
  { id: 1, name: 'Product 1' },
  // ... 10,000 items (Will not be Proxy-wrapped) ...
])

// ✅ markRaw:The tagged object never responds(Fastest)
const staticConfig = markRaw({
  apiUrl: 'https://api.example.com',
  version: '1.0'
})

// Replace All
products.value = await fetchProducts()  // Trigger only 1 Next Update

// Basics Proxy Example
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  // Output "Read name",Back 'Alice'
proxy.age = 26  // Output "Write age = 26"

// Vue 3 Inside reactivity A Simplified Implementation of a Package
function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      // 1. Dependency Collection:Track who is using this property
      track(target, key)
      
      // 2. Recursive Wrapping:Nested objects also become reactive
      const value = Reflect.get(target, key, receiver)
      if (isObject(value)) {
        return reactive(value)
      }
      return value
    },
    set(target, key, value, receiver) {
      // 1. Setting Value
      const oldValue = target[key]
      const result = Reflect.set(target, key, value, receiver)
      
      // 2. Trigger an update:Notify all locations where this property is used
      if (oldValue !== value) {
        trigger(target, key)
      }
      return result
    }
  })
}

// Vue 3 Internal Data Structures
const targetMap = new WeakMap()
// targetMap = { obj1: Map1, obj2: Map2, ... }
// Map1 = { key1: Set1, key2: Set2, ... }
// Set1 = Set<activeEffect1, activeEffect2, ...>

function track(target, key) {
  // 1. Get target Corresponding Map
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    depsMap = new Map()
    targetMap.set(target, depsMap)
  }
  
  // 2. Get key Corresponding Set
  let dep = depsMap.get(key)
  if (!dep) {
    dep = new Set()
    depsMap.set(key, dep)
  }
  
  // 3. Record the currently active 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) {
    // Notify all dependencies to re-execute
    dep.forEach(effect => effect.run())
  }
}

// Vue 3 ref Internal Implementation
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. Compare the old and new values
    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>
  <!-- Automatic unpacking in templates:{{ count }} rather than {{ count.value }} -->
  <p>{{ count }}</p>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
console.log(count.value)  // 0(JS Domestic Demand .value)
console.log(count)        // 0(devtools Displayed in the middle 0)
</script>

// Vue 3 computed Simplified Implementation
function computed(getter) {
  const ref = {
    // 1. Cache value
    _value: undefined,
    
    // 2. Has it expired?(Needs to be recalculated)
    _dirty: true,
    
    // 3. getter
    get value() {
      // Lazy Evaluation:Counted only on the first visit
      if (this._dirty) {
        this._value = effect(getter)  // Collect Dependencies
        this._dirty = false
      }
      
      // 4. track(Who is using me?)
      track(this, 'value')
      return this._value
    }
  }
  
  // 5. When dependencies change,Mark dirty
  effect(() => getter()).scheduled = () => {
    ref._dirty = true
    trigger(ref, 'value')  // For triggering computed Component Updates
  }
  
  return ref
}

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

console.log(double.value)  // 0(First Calculation)
console.log(double.value)  // 0 (Cached, Do not recalculate)
count.value = 5
console.log(double.value)  // 10(Recalculation)

import { shallowRef, triggerRef } from 'vue'

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

// ❌ Not responding(Edit .value Internal Properties)
products.value[0].name = 'iPad'
// Will not trigger an update(shallowRef Follow Only .value Replace All)

// ✅ Trigger an update(Replace All)
products.value = [...products.value, { id: 3, name: 'iPad' }]

// ✅ Force Trigger(Manually after making internal changes trigger)
products.value[0].name = 'iPad'
triggerRef(products)

import { shallowReactive } from 'vue'

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

// ✅ Response:Changes to Top-Level Properties
state.user = { name: 'Bob' }

// ❌ Not responding:Nested Properties
state.user.name = 'Charlie'

import { markRaw, reactive } from 'vue'

// Examples of Third-Party Libraries (e.g. ECharts, Mapbox) No need for reactive design
const map = markRaw(new Map())
const chart = markRaw(echarts.init(element))

const state = reactive({
  map,    // ✅ Will not be Proxy Packaging
  chart   // ✅ Performance Improvements 30%
})

// Simulation Vue 3 Responsive Systems
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
    }
  })
}

// Usage
const state = reactive({ count: 0 })
let render = null

// Simulation render Function
activeEffect = () => console.log(`Render: count = ${state.count}`)
render = activeEffect
render()  // Output "Render: count = 0"

state.count = 1  // Trigger render,Output "Render: count = 1"

import { ref, reactive, shallowRef, markRaw } from 'vue'

// ref:Wrap any value
const count = ref(0)
console.log(count)  // RefImpl { _value: 0, __v_isRef: true, ... }

// reactive:Items to Be Packaged
const state = reactive({ count: 0 })
console.log(state)  // Proxy { count: 0, ... }

// shallowRef: Shallow
const list = shallowRef([1, 2, 3])
console.log(list)  // RefImpl { _value: [1, 2, 3] }  // Arrays are not reactive Packaging

// markRaw:Does not respond at all
const map = markRaw(new Map())
console.log(map)  // Map { ... }  // Regular Map,No Proxy

// Performance Testing:10,000 A property
const obj = {}
for (let i = 0; i < 10000; i++) {
  obj[`key${i}`] = i
}

console.time('Object.defineProperty')
// ... 10,000 getter/setter
console.timeEnd('Object.defineProperty')
// Usually 50-100ms

console.time('Proxy')
const proxy = new Proxy(obj, { /* ... */ })
console.timeEnd('Proxy')
// Usually 1-5ms(Create only when accessed)

// 1. watchEffect Printing Dependencies
watchEffect(() => {
  console.log('Dependency:', { a: state.a, b: state.b })
})

// 2. Trigger a manual update(forceUpdate)
import { triggerRef } from 'vue'
triggerRef(stateRef)

// 3. Check the responsive status
import { isReactive, isRef, isReadonly, isProxy } from 'vue'
isReactive(obj)  // true/false
isRef(refObj)    // true/false

// 4. Original Object(Remove Proxy)
import { toRaw } from 'vue'
const raw = toRaw(reactiveObj)

// 5. Performance Labels
import { markRaw } from 'vue'
const fast = markRaw(expensiveObj)