vue3源码(将render函数变成vnode再转成真实dom)

本文探讨如何将Vue3的render函数转换为虚拟DOM(VNode),并进一步转化为真实DOM。通过_addRenderMethod、_update等原型方法实现这一过程,详细解释了从render函数到页面更新的步骤,包括创建元素、创建文本以及VNode到DOM的转换。最终,展示了如何在页面上渲染新的DOM结构。
摘要由CSDN通过智能技术生成

现在已经获得了render函数后,需要把render函数变成vnode,之后将vnode生成真实dom

let render=compileToFunction(el)
   //render
   //(1)将render函数变成vnode即虚拟dom (2)将vnode变成真实dom放到页面上去
   options.render=render
   //虚拟dom

在源码中,通过_render将render函数变成虚拟dom

再通过_update将虚拟dom变成真实dom放到页面上去

export function mountComponent(vm,el){
   
    //源码中 
    vm._update(vm._render)
    //1.vm._render将render函数变成虚拟dom vnode
    //2.vm._update将vnode变成真实dom再放到页面上去
}

所以需要对vue添加原型方法

export function renderMinxin(Vue){
   
    Vue.prototype._render=function(){
   

    }
}
export function lifecycleMixin(Vue){
   
    Vue.prototype._update=function(vode){
   
        //将虚拟dom变成真实dom放到页面上
    }
}

可以试着先打印一下

export function renderMinxin(Vue){
   
    Vue.prototype._render
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值