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

现在已经获得了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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3中的render函数是用来创建组件的虚拟DOM树,并将其渲染到实际的DOM上。它可以用于编写更灵活和高效的组件。 在Vue 3中,render函数采用了一种新的语法,称为JSX语法。下面是一个简单的示例,展示如何使用render函数: ```javascript import { createApp, h } from 'vue' const app = createApp({ render() { return h('div', 'Hello, Vue 3!') } }) app.mount('#app') ``` 在上面的示例中,我们首先导入了`createApp`和`h`函数。`createApp`用于创建Vue应用实例,而`h`函数是用来创建虚拟DOM节点。 在`render`函数中,我们使用`h`函数创建了一个`div`节点,并设置其内容为"Hello, Vue 3!"。最后,我们使用`app.mount('#app')`将应用挂载到id为`app`的DOM元素上。 你也可以在render函数创建更复杂的虚拟DOM结构,例如嵌套的子节点、绑定事件等。以下是一个稍复杂的示例: ```javascript import { createApp, h } from 'vue' const app = createApp({ render() { return h('div', [ h('h1', 'Hello, Vue 3!'), h('button', { onClick: this.handleClick }, 'Click me') ]) }, methods: { handleClick() { console.log('Button clicked!') } } }) app.mount('#app') ``` 在上面的示例中,我们创建了一个包含`h1`标题和一个按钮的`div`节点。按钮上绑定了`onClick`事件,点击按钮时会触发`handleClick`方法。 这就是使用Vue 3中的render函数创建组件的基本用法。希望对你有所帮助!如果你还有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值