이 글은 Vue3에 대한 심층적인 이해를 돕고, Provide/Inject의 구현 원리를 자세히 소개하는 글이 모든 분들께 도움이 되기를 바랍니다!
Vue3의 Provide/Inject 구현 원리는 실제로 프로토타입과 프로토타입 체인을 교묘하게 활용하여 구현됩니다. 따라서 Vue3의 Provide/Inject 구현 원리를 이해하기 전에 먼저 프로토타입 및 프로토타입 체인에 대한 지식을 복습해 보겠습니다. [관련 권장 사항: vue.js 비디오 튜토리얼]
__proto____proto__
prototype 一般称为显式原型，__proto__一般称为隐式原型。 每一个函数在创建之后，在默认情况下，会拥有一个名为 prototype 的属性，这个属性表示函数的原型对象。
当我们访问一个JS对象属性的时候，JS先会在这个对象定义的属性里找，找不到就会沿着这个对象的__proto__这个隐式原型关联起来的链条向上一个对象查找，这个链条就叫原型链。
function Fn() {}
Fn.prototype.name = 'coboy'
let fn1 = new Fn()
fn1.age = 18
console.log(fn1.name) // coboy
console.log(fn1.age) // 18fn1是Fn函数new出来的实例对象，fn1.age是这个实例对象上属性，fn1.name则从Fn.prototype原型对象而来，因为fn1的__proto__隐式原型就是指向Fn这个函数的原型对象Fn.prototype。原型链某种意义上是让一个引用类型继承另一个引用类型的属性和方法。
function Fn() {}
Fn.prototype.name = 'coboy'
let fn1 = new Fn()
fn1.name = 'cobyte'
console.log(fn1.name) // cobyte当访问fn1这个实例对象的属性name的时候，JS先会在fn1这个实例对象的属性里查找，刚好fn1定义了一个name属性，所以就直接返回自身属性的值cobyte，否则就会继续沿着原型链向Fn.prototype上去找，那么就会返回coboy。
复习完原型和原型链的知识之后，我们就开始进入Provide/Inject的实现原理探索。
在 setup() 中使用 provide 时，我们首先从 vue 显式导入 provide 方法。这使我们能够调用 provide 来定义每个 property。
provide 函数允许你通过两个参数定义 property
name (<String> 类型)
value
import { provide } from 'vue'
export default {
setup() {
provide('name', 'coboy')
}
}那么这个provide API实现原理是什么呢？
provide 函数可以简化为
export function provide(key, value) {
// 获取当前组件实例
const currentInstance: any = getCurrentInstance()
if(currentInstance) {
// 获取当前组件实例上provides属性
let { provides } = currentInstance
// 获取当前父级组件的provides属性
const parentProvides = currentInstance.parent.provides
// 如果当前的provides和父级的provides相同则说明还没赋值
if(provides === parentProvides) {
// Object.create() es6创建对象的另一种方式，可以理解为继承一个对象, 添加的属性是在原型下。
provides = currentInstance.provides = Object.create(parentProvides)
}
provides[key] = value
}
}综上所述provide API就是通过获取当前组件的实例对象，将传进来的数据存储在当前的组件实例对象上的provides上，并且通过ES6的新API Object.create把父组件的provides属性设置到当前的组件实例对象的provides属性的原型对象上。
源码位置：runtime-core/src/component.ts
我们通过查看instance对象的源码，可以看到，在instance组件实例对象上，存在parent和provides两个属性。在初始化的时候如果存在父组件则把父组件的provides赋值给当前的组件实例对象的provides，如果没有就创建一个新的对象，并且把应用上下文的provides属性设置为新对象的原型对象上的属性。
在 setup() 中使用 inject 时，也需要从 vue 显式导入。导入以后，我们就可以调用它来定义暴露给我们的组件方式。
inject
__proto__는 일반적으로 암시적 프로토타입이라고 합니다. 각 함수가 생성된 후에는 기본적으로 함수의 프로토타입 개체를 나타내는 프로토타입이라는 속성을 갖게 됩니다. JS 객체의 속성에 액세스할 때 JS는 먼저 객체에 정의된 속성을 검색합니다. 이를 찾을 수 없으면 숨겨진 __proto__를 따릅니다. 이 객체와 관련된 체인은 다음 객체를 검색합니다. 이 체인을 프로토타입 체인이라고 합니다. import { inject } from 'vue'
export default {
setup() {
const name = inject('name', 'cobyte')
return {
name
}
}
}__proto__ 암시적 프로토타입이 이를 가리키기 때문입니다. 함수 Fn의 프로토타입 객체 Fn.prototype에. 프로토타입 체인을 사용하면 한 참조 유형이 다른 참조 유형의 속성과 메서드를 상속할 수 있습니다.
export function inject(
key,
defaultValue,
treatDefaultAsFactory = false
) {
// 获取当前组件实例对象
const instance = currentInstance || currentRenderingInstance
if (instance) {
// 如果intance位于根目录下，则返回到appContext的provides，否则就返回父组件的provides
const provides =
instance.parent == null
? instance.vnode.appContext && instance.vnode.appContext.provides
: instance.parent.provides
if (provides && key in provides) {
return provides[key]
} else if (arguments.length > 1) {
// 如果存在1个参数以上
return treatDefaultAsFactory && isFunction(defaultValue)
// 如果默认内容是个函数的，就执行并且通过call方法把组件实例的代理对象绑定到该函数的this上
? defaultValue.call(instance.proxy)
: defaultValue
}
}
}setup()에서 provide를 사용할 때 먼저 vue<에서 시작합니다. /code> <code>provide 메소드를 명시적으로 가져옵니다. 이를 통해 provide를 호출하여 각 속성을 정의할 수 있습니다. provide 함수를 사용하면 두 개의 매개변수name(<String> 유형)🎜🎜🎜🎜value🎜🎜🎜Object.myCreate = function (proto, propertyObject = undefined) {
if (propertyObject === null) {
// 这里没有判断propertyObject是否是原始包装对象
throw 'TypeError'
} else {
function Fn () {}
// 设置原型对象属性
Fn.prototype = proto
const obj = new Fn()
if (propertyObject !== undefined) {
Object.defineProperties(obj, propertyObject)
}
if (proto === null) {
// 创建一个没有原型对象的对象，Object.create(null)
obj.__proto__ = null
}
return obj
}
}// 第二个参数为null时，抛出TypeError
// const throwErr = Object.myCreate({name: 'coboy'}, null) // Uncaught TypeError
// 构建一个以
const obj1 = Object.myCreate({name: 'coboy'})
console.log(obj1) // {}, obj1的构造函数的原型对象是{name: 'coboy'}
const obj2 = Object.myCreate({name: 'coboy'}, {
age: {
value: 18,
enumerable: true
}
})
console.log(obj2) // {age: 18}, obj2的构造函数的原型对象是{name: 'coboy'}
🎜🎜인스턴스의 소스코드를 보면 객체를 보면 인스턴스 구성 요소 인스턴스 객체에 parent와 presents라는 두 가지 속성이 있음을 알 수 있습니다. 초기화 중에 상위 구성 요소가 있으면 상위 구성 요소의 제공을 현재 구성 요소 인스턴스 객체의 제공에 할당합니다. 그렇지 않은 경우 새 객체를 만들고 응용 프로그램 컨텍스트의 presents 속성을 새 객체의 프로토타입 객체에 대한 속성으로 설정합니다. 🎜setup()에서 inject를 사용할 때도 에서 시작해야 합니다. vue< /code> 명시적 가져오기. 가져온 후 이를 호출하여 우리에게 노출되는 구성 요소 모드를 정의할 수 있습니다. 🎜🎜<code>inject 이 함수에는 두 개의 매개변수가 있습니다: 🎜🎜🎜🎜주입할 속성의 이름🎜🎜🎜🎜기본값(🎜선택사항🎜)🎜🎜🎜provides = currentInstance.provides = Object.create(parentProvides)
通过上面的分析，可以得知provide/inject实现原理还是比较简单的，就是巧妙地利用了原型和原型链进行数据的继承和获取。provide API调用设置的时候，设置父级的provides为当前provides对象原型对象上的属性，在inject获取provides对象中的属性值时，优先获取provides对象自身的属性，如果自身查找不到，则沿着原型链向上一个对象中去查找。
方法说明
__proto__属性的值（以第一个参数作为新对象的构造函数的原型对象）源码模拟
Object.myCreate = function (proto, propertyObject = undefined) {
if (propertyObject === null) {
// 这里没有判断propertyObject是否是原始包装对象
throw 'TypeError'
} else {
function Fn () {}
// 设置原型对象属性
Fn.prototype = proto
const obj = new Fn()
if (propertyObject !== undefined) {
Object.defineProperties(obj, propertyObject)
}
if (proto === null) {
// 创建一个没有原型对象的对象，Object.create(null)
obj.__proto__ = null
}
return obj
}
}定义一个空的构造函数，然后指定构造函数的原型对象，通过new运算符创建一个空对象，如果发现传递了第二个参数，通过Object.defineProperties为创建的对象设置key、value，最后返回创建的对象即可。
示例
// 第二个参数为null时，抛出TypeError
// const throwErr = Object.myCreate({name: 'coboy'}, null) // Uncaught TypeError
// 构建一个以
const obj1 = Object.myCreate({name: 'coboy'})
console.log(obj1) // {}, obj1的构造函数的原型对象是{name: 'coboy'}
const obj2 = Object.myCreate({name: 'coboy'}, {
age: {
value: 18,
enumerable: true
}
})
console.log(obj2) // {age: 18}, obj2的构造函数的原型对象是{name: 'coboy'}provides = currentInstance.provides = Object.create(parentProvides) 发生了什么？
Object.create(parentProvides) 创建了一个新的对象引用，如果只是把 currentInstance.provides 更新为新的对象引用，那么provides的引用还是旧的引用，所以需要同时把provides的引用也更新为新的对象引用。
来自《JavaScript权威指南》的解析
provides = currentInstance.provides = Object.create(parentProvides)
上述的provides是一个表达式，它被严格地称为“赋值表达式的左手端(Ihs)操作数”。
而右侧 currentInstance.provides = Object.create(parentProvides) 这一个整体也当做一个表达式，这一个整体赋值表达式的计算结果是赋值给了最左侧的providescurrentInstance.provides = Object.create(parentProvides) 这个表达式同时也是一个赋值表达式，Object.create(parentProvides)创建了一个新的引用赋值给了currentInstance这个引用上的provides属性
currentInstance.provides这个表达式的语义是：
currentInstance.provides表达式的结果(Result)currentInstance.provides当它作为赋值表达式的左操作数时，它是一个被赋值的引用，而当它作为右操作数时，则计算它的值。
注意：赋值表达式左侧的操作数可以是另一个表达式，而在声明语句中的等号左边，绝不可能是一个表达式。 例如上面的如果写成了let provides = xxx，那么这个时候，provides只是一个表达名字的、静态语法分析期作为标识符来理解的字面文本，而不是一个表达式。
（学习视频分享：web前端教程）
위 내용은 Vue3의 Provide 및 Inject 구현 원칙에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
