前言
vue3響應式原則加api編寫，快速明白vue3響應式原理
GitHub博客:https://github .com/jiejiangzi/blog/issues/8
vue3響應式原理實作
先寫一段程式碼看下
#實作effect
var name = 'sl', age = 22;
effect1 = () => `我叫${name}，今年${age}岁`
effect2 = () => `我叫${name}，今年${age+1}岁`
console.log(effect1()) //我叫sl，今年22岁
console.log(effect2()) //我叫sl，今年23岁
age = 30;
console.log(effect1()) //我叫sl，今年30岁
console.log(effect2()) //我叫sl，今年31岁登入後複製
看看有什麼可以優化的點呢？
首先：多個函數，在age發生變化後需要手動再次呼叫多個函數才可以取得最新資訊
期望可以修改資訊以後自動呼叫多個函數
如何實作呢
可以想到將多個函數存放到一起存放到gather函數，並且讓age發生變化時可以將多個函數呼叫trigger呼叫
實作gather及trigger
var name = "sl",
age = 22;
var tom, joy;
effect1 = () => (tom = `我叫${name}，今年${age}岁`);
effect2 = () => (joy = `我叫${name}，今年${age + 1}岁`);
var dep = new Set();
function gather() {
dep.add(effect1);
dep.add(effect2);
}
function trigger() {
dep.forEach((effect) => effect());
}
gather();
effect1()
effect2()
console.log(tom); //我叫sl，今年22岁
console.log(joy); //我叫sl，今年23岁
age = 30;
trigger()
console.log(tom); //我叫sl，今年30岁
console.log(joy); //我叫sl，今年31岁登入後複製
再繼續看下還是有什麼可以優化的點
如果變數是一個物件或多個物件的話該怎麼處理呢
變數為原始類型時Set儲存
變數為物件時可以用map儲存
多個物件時用weakMap儲存
var obj1 = { name: "tom", age: 22 };
var obj2 = { name: "joy", age: 23 };
var tom, joy;
effect1 = () => (tom = `我叫${obj1.name}，今年${obj1.age}岁`);
effect2 = () => (joy = `我叫${obj2.name}，今年${obj2.age}岁`);
var depsMap = new WeakMap();
function gather(target, key) {
let depMap = depsMap.get(target);
if (!depMap) {
depsMap.set(target, (depMap = new Map()));
}
let dep = depMap.get(key);
if (!dep) {
depMap.set(key, (dep = new Set()));
}
if (target === obj1) {
dep.add(effect1);
} else {
dep.add(effect2);
}
}
function trigger(target, key) {
let depMap = depsMap.get(target);
if (depMap) {
const dep = depMap.get(key);
if (dep) {
dep.forEach((effect) => effect());
}
}
}
gather(obj1, "age");//收集依赖
gather(obj2, "age");//收集依赖
effect1();
effect2();
console.log(tom); //我叫sl，今年22岁
console.log(joy); //我叫sl，今年23岁
obj1.age = 30;
obj2.age = 10;
trigger(obj1, "age");
trigger(obj2, "age");
console.log(tom); //我叫sl，今年30岁
console.log(joy); //我叫sl，今年31岁登入後複製
在繼續看看有哪些可以優化的點
上邊依賴的收集gather以及函數的更新通知trigger每次都是手動收集手動觸發更新，那有什麼方法可以自動收集及觸發嗎
Proxy
#實作reactive
先寫一個reactive函數
function reactive(target) {
const handle = {
set(target, key, value, receiver) {
Reflect.set(target, key, value, receiver);
trigger(receiver,key) // 设置值时触发自动更新
},
get(target, key, receiver) {
gather(receiver, key); // 访问时收集依赖
return Reflect.get(target, key, receiver);
},
};
return new Proxy(target, handle);
}登入後複製
然後將reactive函數應用到之前程式碼
var obj1 = reactive({ name: "tom", age: 22 });
var obj2 = reactive({ name: "joy", age: 23 });
var tom, joy;
effect1 = () => (tom = `我叫${obj1.name}，今年${obj1.age}岁`);
effect2 = () => (joy = `我叫${obj2.name}，今年${obj2.age}岁`);
var depsMap = new WeakMap();
function gather(target, key) {
let depMap = depsMap.get(target);
if (!depMap) {
depsMap.set(target, (depMap = new Map()));
}
let dep = depMap.get(key);
if (!dep) {
depMap.set(key, (dep = new Set()));
}
if (target === obj1) {
dep.add(effect1);
} else {
dep.add(effect2);
}
}
function trigger(target, key) {
let depMap = depsMap.get(target);
if (depMap) {
const dep = depMap.get(key);
if (dep) {
dep.forEach((effect) => effect());
}
}
}
effect1();
effect2();
console.log(tom); //我叫sl，今年22岁
console.log(joy); //我叫sl，今年23岁
obj1.age = 30;
obj2.age = 10;
console.log(tom); //我叫sl，今年30岁
console.log(joy); //我叫sl，今年31岁登入後複製
然後還有個問題，就是gather函數中有寫死dep添加函數
如何解決呢重寫effect函數
let activeEffect = null
function effect(fn) {
activeEffect = fn;
activeEffect();
activeEffect = null; // 执行后立马变成null
}
var depsMap = new WeakMap();
function gather(target, key) {
// 避免例如console.log(obj1.name)而触发gather
if (!activeEffect) return;
let depMap = depsMap.get(target);
if (!depMap) {
depsMap.set(target, (depMap = new Map()));
}
let dep = depMap.get(key);
if (!dep) {
depMap.set(key, (dep = new Set()));
}
dep.add(activeEffect) //将函数添加到依赖
}
effect(effect1);
effect(effect2);登入後複製
reactive也已經實現了，那麼還有ref也實作下
ref
在vue3中ref怎麼使用呢
var name = ref('tom')
console.log(name.value) // tom
登入後複製
需要使用.value的方式取得值
function ref(name){
return reactive(
{
value: name
}
)
}
const name = ref('tom');
console.log(name.value) //tom登入後複製
完整程式碼
var activeEffect = null;
function effect(fn) {
activeEffect = fn;
activeEffect();
activeEffect = null;
}
var depsMap = new WeakMap();
function gather(target, key) {
// 避免例如console.log(obj1.name)而触发gather
if (!activeEffect) return;
let depMap = depsMap.get(target);
if (!depMap) {
depsMap.set(target, (depMap = new Map()));
}
let dep = depMap.get(key);
if (!dep) {
depMap.set(key, (dep = new Set()));
}
dep.add(activeEffect)
}
function trigger(target, key) {
let depMap = depsMap.get(target);
if (depMap) {
const dep = depMap.get(key);
if (dep) {
dep.forEach((effect) => effect());
}
}
}
function reactive(target) {
const handle = {
set(target, key, value, receiver) {
Reflect.set(target, key, value, receiver);
trigger(receiver, key); // 设置值时触发自动更新
},
get(target, key, receiver) {
gather(receiver, key); // 访问时收集依赖
return Reflect.get(target, key, receiver);
},
};
return new Proxy(target, handle);
}
function ref(name){
return reactive(
{
value: name
}
)
}登入後複製
推薦學習：《最新的5個vue.js影片教學精選》
以上是解析vue3響應式原理以及api編寫的詳細內容。更多資訊請關注PHP中文網其他相關文章！
