Vue组件实现原理详细分析

1.渲染组件

从用户的角度来看,一个有状态的组件实际上就是一个选项对象。

const Componetn = {
 name: "Button",
 data() {
 return {
 val: 1
 }
 }
}

而对于渲染器来说,一个有状态的组件实际上就是一个特殊的vnode。

const vnode = {
 type: Component,
 props: {
 val: 1
 },
}

通常来说,组件渲染函数的返回值必须是其组件本身的虚拟DOM。

const Component = {
 name: "Button",
 render() {
 return {
 type: 'button',
 children: '按钮'
 }
 }
}

这样在渲染器中,就可以调用组件的render方法来渲染组件了。

function mountComponent(vnode, container, anchor) {
 const componentOptions = vnode.type;
 const { render } = componentOptions;
 const subTree = render();
 patch(null, subTree, container, anchor);
}

2.组件的状态与自更新

在组件中,我们约定组件使用data函数来定义组件自身的状态,同时可以在渲染函数中,调用this访问到data中的状态。

const Component = {
 name: "Button",
 data() {
 return {
 val: 1
 }
 }
 render() {
 return {
 type: 'button',
 children: `${this.val}`
 }
 }
}
function mountComponent(vnode, container, anchor) {
 const componentOptions = vnode.type;
 const { render, data } = componentOptions;
 const state = reactive(data); // 将data封装成响应式对象
 effect(() => {
 const subTree = render.call(state,state); // 将data本身指定为render函数调用过程中的this
 	patch(null, subTree, container, anchor);
 });
}

但是,响应式数据修改的同时,相对应的组件也会重新渲染,当多次修改组件状态时,组件将会连续渲染多次,这样的性能开销明显是很大的。因此,我们需要实现一个任务缓冲队列,来让组件渲染只会运行在最后一次修改操作之后。

const queue = new Set();
let isFlushing = false;
const p = Promise.resolve();
function queueJob(job) {
 queue.add(job);
 if(!isFlushing) {
 isFlushing = true;
 p.then(() => {
 try {
 queue.forEach(job=>job());
 } finally {
 isFlushing = false;
 queue.length = 0;
 }
 })
 }
}
function mountComponent(vnode, container, anchor) {
 const componentOptions = vnode.type;
 const { render, data } = componentOptions;
 const state = reactive(data); // 将data封装成响应式对象
 effect(() => {
 const subTree = render.call(state,state); // 将data本身指定为render函数调用过程中的this
 	patch(null, subTree, container, anchor);
 }, {
 scheduler: queueJob
 });
}

3.组件实例和生命周期

组件实例实际上就是一个状态合集,它维护着组件运行过程中的所有状态信息。

function mountComponent(vnode, container, anchor) {
 const componentOptions = vnode.type;
 const { render, data } = componentOptions;
 const state = reactive(data); // 将data封装成响应式对象
 const instance = {
 state,
 isMounted: false, // 组件是否挂载
 subTree: null // 组件实例
 }
 vnode.component = instance;
 effect(() => {
 const subTree = render.call(state,state); // 将data本身指定为render函数调用过程中的this
 	if(!instance.isMounted) {
 patch(null, subTree, container, anchor);
 instance.isMounted = true;
	} else{
 ptach(instance.subTree, subTree, container, anchor);
 }
 instance.subTree = subTree; // 更新组件实例
 }, {
 scheduler: queueJob
 });
}

因为isMounted这个状态可以区分组件的挂载和更新,因此我们可以在这个过程中,很方便的插入生命周期钩子。

function mountComponent(vnode, container, anchor) {
 const componentOptions = vnode.type;
 const { render, data, beforeCreate, created, beforeMount, mounted, beforeUpdate, updated } = componentOptions;
 beforeCreate && beforeCreate(); // 在状态创建之前,调用beforeCreate钩子
 const state = reactive(data); // 将data封装成响应式对象
 const instance = {
 state,
 isMounted: false, // 组件是否挂载
 subTree: null // 组件实例
 }
 vnode.component = instance;
 created && created.call(state); // 状态创建完成后,调用created钩子
 effect(() => {
 const subTree = render.call(state,state); // 将data本身指定为render函数调用过程中的this
 	if(!instance.isMounted) { 
 beforeMount && beforeMount.call(state); // 挂载到真实DOM前,调用beforeMount钩子
 patch(null, subTree, container, anchor);
 instance.isMounted = true;
 mounted && mounted.call(state); // 挂载到真实DOM之后,调用mounted钩子
	} else{
 beforeUpdate && beforeUpdate.call(state); // 组件更新状态挂载到真实DOM之前,调用beforeUpdate钩子
 ptach(instance.subTree, subTree, container, anchor);
 	updated && updated.call(state); // 组件更新状态挂载到真实DOM之后,调用updated钩子
 }
 instance.subTree = subTree; // 更新组件实例
 }, {
 scheduler: queueJob
 });
}

4.props与组件状态的被动更新

通常,我们会指定组件接收到的props。因此,对于一个组件的props将会有两部分的定义:传递给组件的props和组件定义的props。

const Component = {
 name: "Button",
 props: {
 name: String
 }
}
function mountComponent(vnode, container, anchor) {
 const componentOptions = vnode.type;
 const { render, data, props: propsOptions, beforeCreate, created, beforeMount, mounted, beforeUpdate, updated } = componentOptions;
 beforeCreate && beforeCreate(); // 在状态创建之前,调用beforeCreate钩子
 const state = reactive(data); // 将data封装成响应式对象
 // 调用 resolveProps 函数解析出最终的 props 数据与 attrs 数据
 const [props, attrs] = resolveProps(propsOptions, vnode.props);
 const instance = {
 state,
 // 将解析出的 props 数据包装为 shallowReactive 并定义到组件实例上
 props: shallowReactive(props),
 isMounted: false, // 组件是否挂载
 subTree: null // 组件实例
 }
 vnode.component = instance;
 // ...
}
function resolveProps(options, propsData) {
 const props = {}; // 存储定义在组件中的props属性
 const attrs = {}; // 存储没有定义在组件中的props属性
 for(const key in propsData ) {
 	if(key in options) {
 props[key] = propsData[key];
 } else {
 attrs[key] = propsData[key];
 }
 }
 return [props, attrs];
}

我们把由父组件自更新所引起的子组件更新叫作子组件的被动更新。当子组件发生被动更新时,我们需要做的是:

  • 检测子组件是否真的需要更新,因为子组件的 props 可能是不变的;
  • 如果需要更新,则更新子组件的 props、slots 等内容。
function patchComponet(n1, n2, container) {
 	const instance = (n2.component = n1.component);
 const { props } = instance;
 if(hasPropsChanged(n1.props, n2.props)) {
 // 检查是否需要更新props
 const [nextProps] = resolveProps(n2.type.props, n2.props);
 for(const k in nextProps) {
 // 更新props
 props[k] = nextProps[k];
 }
 for(const k in props) {
 // 删除没有的props
 if(!(k in nextProps)) delete props[k];
 }
 }
}
function hasPropsChanged( prevProps, nextProps) {
 const nextKeys = Object.keys(nextProps);
 if(nextKeys.length !== Object.keys(preProps).length) {
 // 如果新旧props的数量不对等,说明新旧props有改变
 return true;
 }
 for(let i = 0; i < nextKeys.length; i++) {
 // 如果新旧props的属性不对等,说明新旧props有改变
 const key = nextKeys[i];
 if(nextProps[key] !== prevProps[key]) return true;
 }
 return false;
}

由于props数据与组件本身的数据都需要暴露到渲染函数中,并使渲染函数能够通过this访问它们,因此我们需要封装一个渲染上下文对象。

function mountComponent(vnode, container, anchor) {
 // ...
 const instance = {
 state,
 // 将解析出的 props 数据包装为 shallowReactive 并定义到组件实例上
 props: shallowReactive(props),
 isMounted: false, // 组件是否挂载
 subTree: null // 组件实例
 }
 vnode.component = instance;
 const renderContext = next Proxy(instance, {
 get(t, k, r) {
 const {state, props} = t;
 if(state && k in state) {
 return state[k];
 } else if (k in props) [
 return props[k];
 ] else {
 console.error("属性不存在");
 }
 },
 set(t, k, v, r) {
 const { state, props } = t;
 if(state && k in state) {
 state[k] = v;
 } else if(k in props) {
 props[k] = v;
 } else {
 console.error("属性不存在");
 }
 }
 });
 // 生命周期函数调用时要绑定渲染上下文对象
 created && created.call(renderContext);
 // ...
}

5.setup函数的作用与实现

setup函数时Vue3新增的组件选项,有别于Vue2中的其他组件选项,setup函数主要用于配合组合式API,为用户提供一个地方,用于创建组合逻辑、创建响应式数据、创建通用函数、注册生命周期钩子等。在组件的整个生命周期中,setup函数只会在被挂载的时候执行一次,它的返回值可能有两种情况:

  • 返回一个函数,该函数作为该组件的render函数
  • 返回一个对象,该对象中包含的数据将暴露给模板

此外,setup函数接收两个参数。第一个参数是props数据对象,另一个是setupContext是和组件接口相关的一些重要数据。

cosnt { slots, emit, attrs, expose } = setupContext;
/**
	slots: 组件接收到的插槽
	emit: 一个函数,用来发射自定义事件
	attrs:没有显示在组件的props中声明的属性
	expose:一个函数,用来显式地对外暴露组件数据
*/

下面我们来实现一下setup组件选项。

function mountComponent(vnode, container, anchor) {
 const componentOptions = vnode.type;
 const { render, data, setup, /* ... */ } = componentOptions;
 beforeCreate && beforeCreate(); // 在状态创建之前,调用beforeCreate钩子
 const state = reactive(data); // 将data封装成响应式对象
 const [props, attrs] = resolveProps(propsOptions, vnode.props);
 const instance = {
 state,
 props: shallowReactive(props),
 isMounted: false, // 组件是否挂载
 subTree: null // 组件实例
 }
 const setupContext = { attrs };
 const setupResult = setup(shallowReadOnly(instance.props), setupContext);
 let setupState = null;
 if(typeof setResult === 'function') {
 if(render) console.error('setup函数返回渲染函数,render选项将被忽略');
 render = setupResult;
 } else {
 setupState = setupResult;
 }
 vnode.component = instance;
 const renderContext = next Proxy(instance, {
 get(t, k, r) {
 const {state, props} = t;
 if(state && k in state) {
 return setupState[k]; // 增加对setupState的支持
 } else if (k in props) [
 return props[k];
 ] else {
 console.error("属性不存在");
 }
 },
 set(t, k, v, r) {
 const { state, props } = t;
 if(state && k in state) {
 setupState[k] = v; // 增加对setupState的支持
 } else if(k in props) {
 props[k] = v;
 } else {
 console.error("属性不存在");
 }
 }
 });
 // 生命周期函数调用时要绑定渲染上下文对象
 created && created.call(renderContext);
}

6.组件事件和emit的实现

在组件中,我们可以使用emit函数发射自定义事件。

function mountComponent(vnode, container, anchor) {
 const componentOptions = vnode.type;
 const { render, data, setup, /* ... */ } = componentOptions;
 beforeCreate && beforeCreate(); // 在状态创建之前,调用beforeCreate钩子
 const state = reactive(data); // 将data封装成响应式对象
 const [props, attrs] = resolveProps(propsOptions, vnode.props);
 const instance = {
 state,
 props: shallowReactive(props),
 isMounted: false, // 组件是否挂载
 subTree: null // 组件实例
 }
 function emit(event, ...payload) {
 const eventName = `on${event[0].toUpperCase() + event.slice(1)}`;
 const handler = instance.props[eventName];
 if(handler) {
 handler(...payload);
 } else {
 console.error('事件不存在');
 }
 }
 const setupContext = { attrs, emit };
 // ...
}

由于没有在组件props中声明的属性不会被添加到props中,因此所有的事件都将不会被添加到props中。对此,我们需要对resolveProps函数进行一些特别处理。

function resolveProps(options, propsData) {
 const props = {}; // 存储定义在组件中的props属性
 const attrs = {}; // 存储没有定义在组件中的props属性
 for(const key in propsData ) {
 	if(key in options || key.startWidth('on')) {
 props[key] = propsData[key];
 } else {
 attrs[key] = propsData[key];
 }
 }
 return [props, attrs];
}

7.插槽的工作原理及实现

顾名思义,插槽就是指组件会预留一个槽位,该槽位中的内容需要由用户来进行插入。

<templete>
	<header><slot name="header"></slot></header>
 <div>
 <slot name="body"></slot>
 </div>
 <footer><slot name="footer"></slot></footer>
</templete>

在父组件中使用的时候,可以这样来使用插槽:

<templete>
	<Component>
 	<templete #header>
 <h1>
 标题
 </h1>
 </templete>
 <templete #body>
 	<section>内容</section>
 </templete>
 <tempelte #footer>
 <p>
 脚注
 </p>
 </tempelte>
 </Component>
</templete>

而上述父组件将会被编译为如下函数:

function render() {
 retuen {
 type: Component,
 children: {
 header() {
 return { type: 'h1', children: '标题' }
 },
 body() {
 return { type: 'section', children: '内容' }
 },
 footer() {
 return { type: 'p', children: '脚注' }
 }
 }
 }
}

而Component组件将会被编译为:

function render() {
 return [
 {
 type: 'header',
 children: [this.$slots.header()]
 },
 {
 type: 'bdoy',
 children: [this.$slots.body()]
 },
 {
 type: 'footer',
 children: [this.$slots.footer()]
 }
 ]
}

在mountComponent函数中,我们就只需要直接取vnode的children对象就可以了。当然我们同样需要对slots进行一些特殊处理。

function mountComponent(vnode, container, anchor) {
 // ...
 const slots = vnode.children || {};
 const instance = {
 state,
 props: shallowReactive(props),
 isMounted: false, // 组件是否挂载
 subTree: null, // 组件实例
 	slots
 }
 const setupContext = { attrs, emit, slots };
 const renderContext = next Proxy(instance, {
 get(t, k, r) {
 const {state, props} = t;
 if(k === '$slots') { // 对slots进行一些特殊处理
 return slots;
 }
 // ...
 },
 set(t, k, v, r) {
 // ...
 }
 });
 // ...
}

8.注册生命周期

在setup中,有一部分组合式API是用来注册生命周期函数钩子的。对于生命周期函数的获取,我们可以定义一个currentInstance变量存储当前正在初始化的实例。

let currentInstance = null;
function setCurrentInstance(instance) {
 currentInstance = instance;
}

然后我们在组件实例中添加mounted数组,用来存储当前组件的mounted钩子函数。

function mountComponent(vnode, container, anchor) {
 // ...
 const slots = vnode.children || {};
 const instance = {
 state,
 props: shallowReactive(props),
 isMounted: false, // 组件是否挂载
 subTree: null, // 组件实例
 	slots,
 mounteds
 }
 const setupContext = { attrs, emit, slots };
 // 在setup执行之前,设置当前实例
 setCurrentInstance(instance);
 const setupResult = setup(shallowReadonly(instance.props),setupContext);
	//执行完后重置
 setCurrentInstance(null);
 // ...
}

然后就是onMounted本身的实现和执行时机了。

function onMounted(fn) {
 if(currentInstance) {
 currentInstace.mounteds.push(fn);
 } else {
 console.error("onMounted钩子只能在setup函数中执行");
 }
}
function mountComponent(vnode, container, anchor) {
 // ...
 effect(() => {
 const subTree = render.call(state,state); // 将data本身指定为render函数调用过程中的this
 	if(!instance.isMounted) { 
 beforeMount && beforeMount.call(state); // 挂载到真实DOM前,调用beforeMount钩子
 patch(null, subTree, container, anchor);
 instance.isMounted = true;
 instance.mounted && instance.mounted.forEach( hook => {
 hook.call(renderContext);
 }) // 挂载到真实DOM之后,调用mounted钩子
	} else{
 // ...
 }
 instance.subTree = subTree; // 更新组件实例
 }, {
 scheduler: queueJob
 });
}
作者:volit_原文地址:https://blog.csdn.net/weixin_49971653/article/details/128715008

%s 个评论

要回复文章请先登录注册