provide/inject源码实现

在 Vue 3 中，provide 和 inject 是通过 Vue 的响应式系统和组件实例机制实现的，底层是依赖 Vue 3 中的 Proxy 和 Reactive 来实现跨层级的数据传递和响应式绑定。以下是一个简化版的实现逻辑，帮助理解 Vue 3 中 provide 和 inject 是如何实现的。

1. provide 的实现

provide 的核心目的是将数据存储在当前组件的上下文中，然后将这些数据传递给其后代组件。Vue 3 使用 Proxy 来实现对组件上下文的响应式管理。

基本的实现思路：

在父组件中，使用 provide 将数据存储到一个上下文对象中，父组件上下文数据存储在当前组件实例的 provides 对象中。

父组件的 provides 会暴露给子组件，子组件可以从父组件的上下文中读取提供的数据。

简化版的实现逻辑如下：

class Component {
constructor() {
this.provides = new Map(); // 存储提供的数据
}

provide(key, value) {
this.provides.set(key, value); // 设置提供的数据
}

inject(key) {
return this.provides.get(key); // 从当前组件的 provides 中获取
}
}

示例：

const parentComponent = new Component();
parentComponent.provide(‘user’, { name: ‘John’, age: 30 });

const childComponent = new Component();
const user = childComponent.inject(‘user’); // 获取父组件提供的数据
console.log(user); // 输出: { name: ‘John’, age: 30 }

2. inject 的实现

inject 用来从当前组件的父组件（或祖先组件）中获取提供的数据。在实际实现中，Vue 会查找组件的父链（即组件树）来查找所需的 provide 数据。

基本的实现思路：

在子组件中，使用 inject 来获取上层组件通过 provide 提供的数据。Vue 会遍历组件树，查找最近的祖先组件。

如果当前组件没有提供数据，Vue 会继续向上查找直到根组件。

class Component {
constructor(parent = null) {
this.parent = parent;
this.provides = new Map(); // 存储提供的数据
}

provide(key, value) {
this.provides.set(key, value);
}

inject(key) {
// 从当前组件开始，逐级向父组件查找数据
let currentComponent = this;
while (currentComponent) {
if (currentComponent.provides.has(key)) {
return currentComponent.provides.get(key);
}
currentComponent = currentComponent.parent;
}
return undefined; // 如果找不到提供的数据，返回 undefined
}
}

示例：

// 父组件提供数据
const parentComponent = new Component();
parentComponent.provide(‘user’, { name: ‘John’, age: 30 });

// 子组件继承父组件
const childComponent = new Component(parentComponent);

// 孙组件继承子组件
const grandchildComponent = new Component(childComponent);

// 孙组件注入父组件提供的数据
const user = grandchildComponent.inject(‘user’);
console.log(user); // 输出: { name: ‘John’, age: 30 }

3. 响应式机制

在 Vue 3 中，provide 和 inject 采用的是基于 Proxy 的响应式系统。Vue 3 的响应式系统使用 Proxy 来监听对象的变化，确保在数据变更时能够触发视图更新。

为了实现响应式传递，Vue 会通过 reactive 来包装提供的数据，然后使用 provide 提供的值会是一个响应式对象，子组件通过 inject 获取该对象时，数据的变化会自动反应到视图中。

简化的响应式实现：

function reactive(obj) {
return new Proxy(obj, {
get(target, prop) {
console.log(Accessing ${prop}); // 打印属性访问的日志
return target[prop];
},
set(target, prop, value) {
console.log(Setting ${prop} to ${value}); // 打印属性设置的日志
target[prop] = value;
return true;
}
});
}

class Component {
constructor(parent = null) {
this.parent = parent;
this.provides = new Map();
}

provide(key, value) {
this.provides.set(key, reactive(value)); // 提供响应式数据
}

inject(key) {
let currentComponent = this;
while (currentComponent) {
if (currentComponent.provides.has(key)) {
return currentComponent.provides.get(key); // 返回响应式数据
}
currentComponent = currentComponent.parent;
}
return undefined;
}
}

示例：

// 父组件提供响应式数据
const parentComponent = new Component();
const user = { name: ‘John’, age: 30 };
parentComponent.provide(‘user’, user);

// 子组件继承父组件
const childComponent = new Component(parentComponent);

// 孙组件继承子组件
const grandchildComponent = new Component(childComponent);

// 孙组件注入父组件提供的响应式数据
const injectedUser = grandchildComponent.inject(‘user’);
injectedUser.name = ‘Jane’; // 通过代理修改数据

console.log(user.name); // 输出: Jane，数据变化自动反映

总结

Vue 3 中的 provide 和 inject 实现是基于 Proxy 的响应式系统，组件的 provides 数据是响应式的，当数据变化时，依赖这些数据的组件会自动更新。provide 用来提供数据，inject 用来注入数据，支持跨组件层级的数据共享。通过 Proxy，Vue 3 能够实现跨层级数据传递和数据的自动更新，使得组件间的数据通信更加灵活和高效。