vue3 응답성 원리 분석 및 API 작성

머리말

vue3 반응 원리와 API 작성, vue3 반응 원리를 빠르게 이해

GitHub 블로그: https://github.com/jiejiangzi/blog/issues/8

vue3 반응 원리 구현

먼저 코드를 작성하여

효과를 구현

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岁

하고 최적화할 수 있는 점이 있는지 확인하세요.

먼저 다중 기능, 연령이 변경된 후에는 최신 정보를 얻기 위해 다중 함수를 다시 수동으로 호출해야 합니다

정보를 수정한 후 다중 함수가 자동으로 호출될 수 있기를 바랍니다

구현 방법

Gather 함수에 함수를 함께 저장하면 여러 가지가 생각날 수 있고, 나이가 바뀌면 여러 함수에 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岁

계속해서 가능한 점이 있는지 살펴보겠습니다. optimized

변수가 객체 또는 다중 객체를 다루는 방법

• 변수가 원시형인 경우 저장 설정

• 변수가 객체인 경우 맵을 사용하여 저장할 수 있습니다

• 객체가 여러 개인 경우에는 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岁

어떤 포인트를 최적화할 수 있는지 계속 확인하세요

위에 의존하는 컬렉션 수집 및 기능 업데이트 알림 트리거를 수동으로 수집하고 매번 업데이트를 트리거할 수 있는 방법이 있습니까? 자동으로 수집하고 작동시키나요?

Proxy

반응형

을 구현하려면 먼저 반응형 함수를 작성하고

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

한 다음 이전 코드에 반응형 함수를 적용하세요

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 추가 함수

어떻게 해결하나요? vue3

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

값을 얻으려면 .value를 사용해야 합니다

var name = ref('tom')
console.log(name.value) // tom

전체 코드

function ref(name){
    return reactive(
        {
            value: name
        }
    )
}
const name = ref('tom');
console.log(name.value) //tom

권장 학습: "최신 5개 vue.js 비디오 튜토리얼 선택

"

위 내용은 vue3 응답성 원리 분석 및 API 작성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!