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-2020
www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/16797628.html
未经授权禁止转载,违者必究!