首页 > 其他分享 >一文看完Vue3的渲染过程

一文看完Vue3的渲染过程

时间:2023-06-18 10:34:25浏览次数:45  
标签:const 一文 render 渲染 vnode instance Vue3 null 方法

Vue3官网中有下面这样一张图,基本展现出了Vue3的渲染原理:

render pipeline

本文会从源码角度来草率的看一下Vue3的运行全流程,旨在加深对上图的理解,从下面这个很简单的使用示例开始:

import { createApp, ref } from "vue";

createApp({
  template: `
        <div class="card">
            <button type="button" @click="count++">count is {{ count }}</button>
        </div>
    `,
  setup() {
    const count = ref(0);
    return {
      count,
    };
  },
}).mount("#app");

通过createApp方法创建应用实例,传了一个组件的选项对象,包括模板template、组合式 API 的入口setup函数,在setup函数里使用ref创建了一个响应式数据,然后return给模板使用,最后调用实例的mount方法将模板渲染到idapp的元素内。后续只要修改count的值页面就会自动刷新,麻雀虽小,但是也代表了Vue的核心。

首先调用了createApp方法:

const createApp = ((...args) => {
    const app = createRenderer(rendererOptions).createApp(...args);
    return app;
});

通过createRenderer创建了一个渲染器,rendererOptions是一个对象,上面主要是操作DOM的方法:

{
    insert: (child, parent, anchor) => {
        parent.insertBefore(child, anchor || null);
    },
    //...
}

这么做主要是方便跨平台,比如在其他非浏览器环境,可以替换成对应的节点操作方法。

function createRenderer(options) {
    return baseCreateRenderer(options);
}

function baseCreateRenderer(options, createHydrationFns) {
    // ...
    return {
        render,
        hydrate,
        createApp: createAppAPI(render, hydrate)
    };
}

baseCreateRenderer方法非常长,包含了渲染器的所有方法,比如mountpatch等,createApp是通过createAppAPI方法调用返回的:

function createAppAPI(render, hydrate) {
    return function createApp(rootComponent, rootProps = null) {
        if (!isFunction(rootComponent)) {
            rootComponent = Object.assign({}, rootComponent);
        }
        const context = createAppContext();
        let isMounted = false;
        const app = (context.app = {
            _uid: uid$1++,
            _component: rootComponent,
            _props: rootProps,
            _container: null,
            _context: context,
            _instance: null,
            version,
            get config() {},
            set config() {},
            use(){},
            mixin(){},
            component(){},
            directive(){},
            mount(){},
            unmount(){},
            provide(){}
        });
        return app;
    }
}

这个就是最终的createApp方法,所谓的应用实例app其实就是一个对象,我们传进去的组件选项作为根组件存储在_component属性上,另外还可以看到应用实例提供的一些方法,比如注册插件的use方法,挂载实例的mount方法等。

context其实也是一个普通对象:

function createAppContext() {
    return {
        app: null,
        config: {
            isNativeTag: NO,
            performance: false,
            globalProperties: {},
            optionMergeStrategies: {},
            errorHandler: undefined,
            warnHandler: undefined,
            compilerOptions: {}
        },
        mixins: [],
        components: {},
        directives: {},
        provides: Object.create(null),
        optionsCache: new WeakMap(),
        propsCache: new WeakMap(),
        emitsCache: new WeakMap()
    };
}

这个上下文对象会保存在应用实例和根VNode上,可能是后续渲染时会用到。

接下来看一下创建实例后挂载的mount方法:

mount(rootContainer, isHydrate, isSVG) {
    // 没有挂载过
    if (!isMounted) {
        // 创建虚拟DOM
        const vnode = createVNode(rootComponent, rootProps);
        vnode.appContext = context;
        // 渲染
        render(vnode, rootContainer, isSVG);
        isMounted = true;
        // 实例和容器元素互相关联
        app._container = rootContainer;
        rootContainer.__vue_app__ = app;
        // 返回根组件的实例
        return getExposeProxy(vnode.component) || vnode.component.proxy;
    }
}

主要就是做了两件事,创建虚拟DOM,然后渲染。

createVNode方法:

const createVNode = _createVNode;
function _createVNode(type, props = null, children = null, patchFlag = 0, dynamicProps = null, isBlockNode = false) {
    const shapeFlag = isString(type)
        ? 1 /* ShapeFlags.ELEMENT */
        : isSuspense(type)
            ? 128 /* ShapeFlags.SUSPENSE */
            : isTeleport(type)
                ? 64 /* ShapeFlags.TELEPORT */
                : isObject(type)
                    ? 4 /* ShapeFlags.STATEFUL_COMPONENT */
                    : isFunction(type)
                        ? 2 /* ShapeFlags.FUNCTIONAL_COMPONENT */
                        : 0;
    return createBaseVNode(type, props, children, patchFlag, dynamicProps, shapeFlag, isBlockNode, true);
}

createVNode方法会根据组件的类型生成一个标志,后续会通过这个标志做一些优化之类的处理。我们传的是一个组件选项,也就是一个普通对象,shapeFlag的值为4

然后调用了createBaseVNode方法:

function createBaseVNode(type, props = null, children = null, patchFlag = 0, dynamicProps = null, shapeFlag = type === Fragment ? 0 : 1 /* ShapeFlags.ELEMENT */, isBlockNode = false, needFullChildrenNormalization = false) {
    const vnode = {
        __v_isVNode: true,
        __v_skip: true,
        type,
        props,
        key: props && normalizeKey(props),
        ref: props && normalizeRef(props),
        scopeId: currentScopeId,
        slotScopeIds: null,
        children,
        component: null,
        suspense: null,
        ssContent: null,
        ssFallback: null,
        dirs: null,
        transition: null,
        el: null,
        anchor: null,
        target: null,
        targetAnchor: null,
        staticCount: 0,
        shapeFlag,
        patchFlag,
        dynamicProps,
        dynamicChildren: null,
        appContext: null,
        ctx: currentRenderingInstance
    };
    return vnode;
}

可以看到返回的虚拟DOM也是一个普通对象,我们传进去的组件选项会存储在type属性上。

虚拟DOM创建完后就会调用render方法将虚拟DOM渲染为实际的DOM节点,render方法是通过参数传给createAppAPI的:

const render = (vnode, container, isSVG) => {
    if (vnode == null) {
        // 卸载
        if (container._vnode) {
            unmount(container._vnode, null, null, true);
        }
    }
    else {
        // 首次渲染或者更新
        patch(container._vnode || null, vnode, container, null, null, null, isSVG);
    }
    flushPreFlushCbs();
    flushPostFlushCbs();
    container._vnode = vnode;
};

如果要渲染的新VNode不存在,那么从容器元素上获取之前VNode进行卸载,否则调用patch方法进行打补丁,如果是首次渲染,container._vnode不存在,那么直接将新VNode渲染为DOM元素即可,否则会对比新旧VNode,使用diff算法进行打补丁,Vue2中使用的是双端diff算法,Vue3中使用的是快速diff算法。

打补丁结束后清空了两个回调队列,可以看到事件队列还分为前后两个,那么我们常用的nextTick方法注册的回调在哪个队列呢,实际上,两个都不在:

const resolvedPromise = Promise.resolve();
let currentFlushPromise = null;

function nextTick(fn) {
    const p = currentFlushPromise || resolvedPromise;
    return fn ? p.then(this ? fn.bind(this) : fn) : p;
}

Promise.resolve()方法会创建一个Resolved状态的Promise对象。

nextTick方法就是这么简单,如果currentFlushPromise有值,那么使用这个Promise注册回调,否则使用默认的resolvedPromise将回调放到微任务队列。

currentFlushPromise会在调用queueFlush方法时赋值,也就是生成一个新的Promise对象:

function queueFlush() {
    if (!isFlushing && !isFlushPending) {
        isFlushPending = true;
        currentFlushPromise = resolvedPromise.then(flushJobs);
    }
}

flushJobs和前面的flushPreFlushCbs方法里冲刷的都是queue队列,而flushPostFlushCbs方法里冲刷的是pendingPostFlushCbs队列,flushJobs方法在冲刷完queue队列后才会冲刷pendingPostFlushCbs队列。而如果是冲刷中调用nextTick添加的回调会在这两个队列都清空后才会执行。

扯远了,回到render方法,接下来看看render方法里调用的patch方法:

const patch = (n1, n2, container, anchor = null, parentComponent = null, parentSuspense = null, isSVG = false, slotScopeIds = null, optimized = (process.env.NODE_ENV !== 'production') && isHmrUpdating ? false : !!n2.dynamicChildren) => {
    	// 新旧VNode相同直接返回
        if (n1 === n2) {
            return;
        }
    	// 如果新旧VNode的类型不同,那么也不需要打补丁了,直接卸载旧的,挂载新的
        if (n1 && !isSameVNodeType(n1, n2)) {
            anchor = getNextHostNode(n1);
            unmount(n1, parentComponent, parentSuspense, true);
            n1 = null;
        }
        const { type, ref, shapeFlag } = n2;
        switch (type) {
              case Text:
                // ...
                break;
              // ...
              default:
                // ...
                else if (shapeFlag & 6 /* ShapeFlags.COMPONENT */) {
                    processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
                }
                // ...
        }
}

patch方法就是用来打补丁更新实际DOM的,switch里面根据VNode的类型不同做的处理也不同,因为我们的例子传的是一个组件选项对象,所以会走processComponent处理分支:

const processComponent = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {
    // 如果旧的VNode不存在,那么调用挂载方法
    if (n1 == null) {
        mountComponent(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);
    }
    // 新旧都存在,那么进行更新操作
    else {
        updateComponent(n1, n2, optimized);
    }
};

根据是否存在旧的VNode判断是调用挂载方法还是更新方法,先看mountComponent方法:

const mountComponent = (initialVNode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {
    const instance = (initialVNode.component = createComponentInstance(initialVNode, parentComponent, parentSuspense));
    setupComponent(instance);
    setupRenderEffect(instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized);
}

首先调用createComponentInstance方法创建组件实例,返回的其实也是一个普通对象:

function createComponentInstance(vnode, parent, suspense) {
    const type = vnode.type;
    const appContext = (parent ? parent.appContext : vnode.appContext) || emptyAppContext;
    const instance = {
        uid: uid++,
        vnode,
        type,
        parent,
        appContext,
        // 还有非常多属性
        // ...
    }
    return instance;
}

然后调用了setupComponent方法:

function setupComponent(instance, isSSR = false) {
    const { props, children } = instance.vnode;
    const isStateful = instance.vnode.shapeFlag & 4;
    initProps(instance, props, isStateful, isSSR);
    initSlots(instance, children);
    const setupResult = isStateful
        ? setupStatefulComponent(instance, isSSR)
        : undefined;
    return setupResult;
}

初始化propsslots,然后如果shapeFlag4会调用setupStatefulComponent方法,前面说了我们传的组件选项对应的shapeFlag就是4,所以会走setupStatefulComponent方法:

function setupStatefulComponent(instance, isSSR) {
    const { setup } = Component;
    if (setup) {
        const setupResult = callWithErrorHandling(setup, instance, 0, [instance.props, setupContext]);
        handleSetupResult(instance, setupResult, isSSR);
    }
}

在这个方法里会调用组件选项的setup方法,这个函数中返回的对象会暴露给模板和组件实例,看一下handleSetupResult方法:

function handleSetupResult(instance, setupResult, isSSR) {
    if (isFunction(setupResult)) {
        instance.render = setupResult;
    } else if (isObject(setupResult)) {
        instance.setupState = proxyRefs(setupResult);
    }
    finishComponentSetup(instance, isSSR);
}

如果setup返回的是一个函数,那么这个函数会直接被作为渲染函数。否则如果返回的是一个对象,会使用proxyRefs将这个对象转为Proxy代理的响应式对象。

最后又调用了finishComponentSetup方法:

function finishComponentSetup(instance, isSSR) {
    const Component = instance.type;
    if (!instance.render) {
        if (!isSSR && compile && !Component.render) {
            const template = Component.template ||
                  resolveMergedOptions(instance).template;
            if (template) {
                const { isCustomElement, compilerOptions } = instance.appContext.config;
                const { delimiters, compilerOptions: componentCompilerOptions } = Component;
                const finalCompilerOptions = extend(extend({
                    isCustomElement,
                    delimiters
                }, compilerOptions), componentCompilerOptions);
                Component.render = compile(template, finalCompilerOptions);
            }
        }
        instance.render = (Component.render || NOOP);
    }
}

这个函数主要是判断组件是否存在渲染函数render,如果不存在则判断是否存在template选项,我们传的组件选项显然是没有render属性,而是传的模板template,所以会使用compile方法来将模板编译成渲染函数。

回到mountComponent方法,最后调用了setupRenderEffect,这个方法很重要:

const setupRenderEffect = (instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized) => {
    // 组件更新方法
    const componentUpdateFn = () => {}
    // 创建一个effect
    const effect = (instance.effect = new ReactiveEffect(componentUpdateFn, () => queueJob(update), instance.scope));
    // 调用effect的run方法执行componentUpdateFn方法
    const update = (instance.update = () => effect.run());
    update();
}

这一步就涉及到Vue3的响应式原理了,核心就是使用Proxy拦截数据,然后在属性读取时将属性和读取该属性的函数(称为副作用函数)关联起来,然后在更新该属性时取出该属性关联的副作用函数出来执行,详细的内容网上已经有非常多的文章了,有兴趣的可以自己搜一搜,或者直接看源码也是可以的。

简化后的ReactiveEffect类就是这样的:

let activeEffect;
class ReactiveEffect {
    constructor(fn, scheduler = null, scope) {
        this.fn = fn;
    }
    run() {
        activeEffect = this;
        try {
            return this.fn();
        } finally {
            activeEffect = null
        }
    } 
}

执行它的run方法时会把自身赋值给全局的activeEffect变量,然后执行副作用函数时如果读取了Proxy代理后的对象的某个属性时就会将对象、属性和这个ReactiveEffect示例关联存储起来,如果属性发生改变,会取出关联的ReactiveEffect实例,执行它的run方法,达到自动更新的目的。

我们使用的是ref方法创建的数据,ref方法返回的响应式数据虽然不是通过Proxy代理的,但是读取修改操作同样是会被拦截的,和Proxy代理的数据拦截时做的事情是一样的。

接下来看看传给它的组件更新方法componentUpdateFn

const componentUpdateFn = () => {
    // 组件没有挂载过
    if (!instance.isMounted) {
        const subTree = (instance.subTree = renderComponentRoot(instance));
        patch(null, subTree, container, anchor, instance, parentSuspense, isSVG);
        initialVNode.el = subTree.el;
        instance.isMounted = true;
    } else {// 组件已经挂载过
        const nextTree = renderComponentRoot(instance);
        patch(prevTree, nextTree, hostParentNode(prevTree.el), getNextHostNode(prevTree), instance, parentSuspense, isSVG);
        next.el = nextTree.el;
    }
}

组件无论是首次挂载,还是更新,做的事情核心是一样的,先调用renderComponentRoot方法生成组件模板的虚拟DOM,然后调用patch方法打补丁。

function renderComponentRoot(instance) {
    const { type: Component, vnode, proxy, withProxy, props, propsOptions: [propsOptions], slots, attrs, emit, render, renderCache, data, setupState, ctx, inheritAttrs } = instance;
    let result = render.call(proxyToUse, proxyToUse, renderCache, props, setupState, data, ctx)
    return result
}

renderComponentRoot核心就是调用组件的渲染函数render方法生成组件模板的虚拟DOM,然后扔给patch方法更新就好了。

看完了mountComponent方法,再来看看updateComponent方法:

const updateComponent = (n1, n2, optimized) => {
    const instance = (n2.component = n1.component);
    if (shouldUpdateComponent(n1, n2, optimized)) {
        // 需要更新
        instance.next = n2;
        instance.update();
    }else {
        // 不需要更新
        n2.el = n1.el;
        instance.vnode = n2;
    }
}

先调用shouldUpdateComponent方法判断组件是否需要更新,大致是通过是否存在过渡效果、是否存在动态slotsprops是否发生改变、子节点是否发改变等来判断。

如果需要更新,那么会执行instance.update方法,这个方法就是前面setupRenderEffect方法里保存的effect.run方法,所以最终执行的也是componentUpdateFn方法。

到这里,从我们创建实例到页面渲染,再到更新的全流程就讲完了,总结一下,大致就是:

1.每个Vue组件都需要产出一份虚拟DOM,也就是组件的render函数的返回值,render函数你可以直接手写,也可以通过template传递模板字符串,由Vue内部来编译成渲染函数,平常我们开发时写的Vue单文件,最终也会编译成普通的Vue组件选项对象;

2.render函数会作为副作用函数执行,也就是如果在模板中使用到了响应式数据(所谓响应式数据就是能拦截到它的各种读取、修改操作),那么响应式数据和属性会与render函数关联起来,那么当响应式数据被修改以后,就能找到依赖它的render函数,那么就可以通知依赖的组件进行更新;

2.有了虚拟DOM之后,Vue内部的渲染器就能将它渲染成真实的DOM,如果是更新的情况,也就是存在新旧两个虚拟DOM,那么Vue会通过比较,必要时会使用diff算法进行高效的更新真实DOM

所以只要你实现一个渲染器,能将虚拟DOM渲染成真实DOM,并且能高效的根据新旧虚拟DOM对比完成更新,再实现一个编译器,能将模板编译成渲染函数,最后再基于Proxy实现一个响应系统就可以实现一个Vue3了,是不是很简单,心动不如行动,下一个框架等你来创造!

标签:const,一文,render,渲染,vnode,instance,Vue3,null,方法
From: https://blog.51cto.com/u_15319948/6507529

相关文章

  • in用不用索引,啥时候能用啥时候不能用,一文说清
    in/or到底能不能用索引应该是肯定的,但有时生效有时不生效,这个能不能量化计算?这是本文想讨论和解答的问题。in到底用不用索引感觉像一桩悬疑片!古早时期的面经,统一说不走索引,在一些程序员脑海中从此留下不可磨灭的印记。有些从业时间较长的程序员脑子里的第一反应就是不走索引,上......
  • Flutter 使用 Key 强制重新渲染小部件
    Flutter使用Key强制重新渲染小部件文章目录Flutter使用Key强制重新渲染小部件一、Key的作用二、强制重新渲染小部件的步骤1、创建一个Key2、将Key分配给小部件3、强制重新渲染小部件三、代码案例一、Key的作用Key在Flutter中是一个抽象类,它有两个主要的子类:LocalK......
  • vue3+vite+web3.js报错ReferenceError: process is not defined
    在vite最新版本中使用web3会报错只需要在vite.config.ts添加如下代码即可解决报错import{fileURLToPath,URL}from'node:url'import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'//引入import{resolve}from'path'export......
  • vue3Props
    一、Props声明一个组件需要显式声明它所接受的props,这样Vue才能知道外部传入的哪些是props,哪些是透传 attribute在使用SFC时,props可以使用defineProps()宏来声明:如子组件中(1)constprops=defineProps(['foo'])(2)constprops=defineProps({ title:String, age......
  • 一文读懂:LoRA实现大模型LLM微调
    LoRA大模型LLM微调为什么要进行微调?LoRA思路提高权重更新效率选择低的秩实现LoRALoRA在LLaMA实现为什么要进行微调?在快速发展的人工智能领域中,以高效和有效的方式使用大型语言模型变得越来越重要。预训练的大型语言模型通常被称为优秀的基础模型,原因在于它们在各种任务上表现出......
  • 一文详解图卷积神经网络
    本文是文章AGentleIntroductiontoGraphNeuralNetworks的个人笔记,强烈建议大家去体验原文的交互式阅读,以及李沐老师的讲解。我的宗旨是尽量使用浅显易懂的白话,而不是晦涩的术语,把概念和理论讲清楚。开始吧!作为一枚资(ruo)深(ji)NLPer,我常见的神经网络输入是一段文本序......
  • 基于uniapp+vite4+vue3搭建跨端项目|uni-app+uview-plus模板
    最近得空学习了下uniapp结合vue3搭建跨端项目。之前也有使用uniapp开发过几款聊天/仿抖音/后台管理等项目,但都是基于vue2开发。随着vite.js破局出圈,越来越多的项目偏向于vue3开发,就想着uniapp搭配vite4.x构建项目效果会如何?经过一番尝试果然真香~版本信息HBuilderX:3.8.4Vite......
  • vue3:vue+nginx+php进行服务端部署的配置(nginx/1.18.0 / [email protected])
    一,开发环境中的配置:1,前端:vue的vue.config.jsconst{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({transpileDependencies:true,publicPath:process.env.NODE_ENV==="production"?"./":"/&qu......
  • Vue3 设置全局变量
    方式一:main.js设置全局变量importapifrom'@/api'app.config.globalProperties.$api=api使用全局变量,使用getCurrentInstance方法。//ctx.$api就是全局设置的变量const{proxy:{$api},}=getCurrentInstance();//ctx.$api就是全局设置的变量con......
  • 一文读懂火山引擎A/B测试的实验类型(1)——编程实验
    一.概述编程实验:指的是通过代码编程进行AB实验,广泛使用于前端优化、策略优化和后端算法优化多种实验场景,包含客户端和服务端实验。前置条件:接入客户端SDK或者服务端SDK,详见:应用接入二.应用场景如何选择实验类型?适用场景是什么?服务端实验:指通过服务端获取实验分组信息并......