Vue 3 响应式原理源码解析 All In One

Vue 3 响应式原理源码解析 All In One

Set & Map / Proxy / Reflect

WeakSet / WeakMap

let p = 5;
let  q = 2;

let total = p * q;
total;
// 10

p = 10;
// 10
total;
// 10, ❌ 不会响应式的更新

// 依赖收集
let dep = new Set();

let effect = () => {
    total = p * q;
    console.log(`new total:`, total);
};

track = (effect) => {
    dep.add(effect)
}

track(effect);

dep;
/*
Set(1) {ƒ}[[Entries]]0: () => {
    total = p * q;
    console.log(`new total:`, total);
}size: 1[[Prototype]]: Set
*/

trigger = (dep) => {
   // 依赖，触发执行
    for (let effect of dep) {
       effect();
    }
}

trigger(dep);
// new total: 20

total;
// 20

// ??? proxy & reflect 拦截，触发 trigger ✅

https://github.com/learning-js-by-reading-source-codes/vue-3-reactivity

https://github.com/learning-js-by-reading-source-codes/vue-3-reactivity/tree/main/src

Vue 3 & vue-next & vue core

https://github.com/learning-js-by-reading-source-codes/vue-3-reactivity/issues/1

Vue 3 响应式实现原理

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      track(target, key)
      return target[key]
    },
    set(target, key, value) {
      target[key] = value
      trigger(target, key)
    }
  })
}

function ref(value) {
  const refObject = {
    get value() {
      track(refObject, 'value')
      return value
    },
    set value(newValue) {
      value = newValue
      trigger(refObject, 'value')
    }
  }
  return refObject
}

https://vuejs.org/guide/extras/reactivity-in-depth.html#how-reactivity-works-in-vue

refs

https://github.com/Code-Pop/vue-3-reactivity

---

---

©xgqfrms 2012-2025

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---