vue3响应式系统源代码剖析之reactive实现揭秘

2023-12-13 09:01:49

揭秘 Vue 3 响应式系统：Reactive API 的运作原理

在现代前端开发中，响应式系统扮演着至关重要的角色，帮助我们构建能够实时响应用户交互的动态应用程序。其中，Vue 3 作为一款备受推崇的前端框架，通过其强大的 Reactive API 全面升级了响应式系统，大大简化了开发者的工作。

Reactive API 的运作机制

认识 Proxy API： Reactive API 巧妙地利用了 JavaScript 中的 Proxy API，它可以创建一个代理对象，拦截并控制对目标对象的访问和修改。当使用 reactive 函数将一个普通对象转换为响应式对象时，实际上就是创建了一个代理对象作为返回结果。

const obj = {
  name: 'John Doe',
  age: 25
};

const reactiveObj = reactive(obj);

reactiveObj.name = 'Jane Doe'; // 触发更新
console.log(reactiveObj.name); // 'Jane Doe'

在这个例子中，reactive 函数将 obj 转换成响应式对象 reactiveObj。当修改 reactiveObj.name 属性时，代理对象会拦截这一操作，触发响应式更新，并输出修改后的值。

浅响应式：只关注表层

有时，我们只希望对对象的一部分属性进行响应式处理，而忽略嵌套的对象。此时，shallowReactive 函数派上用场。它只对第一层的属性进行响应式处理，而不会深入到嵌套对象中。

const obj = {
  name: 'John Doe',
  address: {
    street: '123 Main St.'
  }
};

const shallowReactiveObj = shallowReactive(obj);

shallowReactiveObj.name = 'Jane Doe'; // 触发更新
console.log(shallowReactiveObj.name); // 'Jane Doe'
shallowReactiveObj.address.street = '456 Elm St.'; // 不会触发更新
console.log(shallowReactiveObj.address.street); // '456 Elm St.'

函数柯里化：分解任务

在 reactive 函数的实现中，还使用了函数柯里化技术。它将函数分解为多个子函数，每个子函数负责一个特定任务。这种分解使代码更易于理解和维护。

function curry(fn, ...args) {
  return (...rest) => fn(...args, ...rest);
}

function add(a, b) {
  return a + b;
}

const curriedAdd = curry(add, 1);

const result = curriedAdd(2);

console.log(result); // 3