createVNode(rootComponent) // 利用渲染器渲染 vnode render(vnode, rootContainer) } } return app } } function render(vnode, container) { // 简单理解为就是执行patch,就是把vnode变成真实的dom,挂载到container上 patch(vnode, container); function patch(vnode, container) { // 得到template的 children...
调用runtime-core中实现的mount方法走标准化流程挂载组件到DOM节点上。从app.mount方法调用后,才真正开始组件的渲染流程。接下来,回到runtime-core中关注渲染流程。核心渲染流程这一流程中主要做了两件事:创建vnode和渲染vnode。vnode是用来描述DOM的JavaScript对象,在Vue中既可以描述普通DOM节点,也可以描述组件节点,除此...
执行销毁组件的逻辑if(container._vnode){unmount(container._vnode,null,null,true)}}else{//创建或更新组件patch(container._vnode||null,vnode,container)}//缓存vnode节点,表示已经渲染container._vnode = vnode}
// 渲染器的工作:将虚拟DOM渲染成真实的DOM,然后挂载到页面上/** * vnode:js对象的dom节点 * container:指定挂载的容器 * */constmount= (vnode, container) => {// 1. 处理vnode的tag,生成真实的dom元素,并用vnode的el属性保存constel = (vnode.el=document.createElement(vnode.tag));// 2. 处理vnod...
在Vue 3 中,h函数(或createElement)用于创建虚拟 DOM。这个函数接受多个参数,包括元素的标签名、属性、子元素等,然后返回一个虚拟 DOM 节点。 1 2 3 4 constvnode =h('div', {class:'container'}, [ h('p','Hello, Vue!'), h('button', {onClick: handleClick },'Click me') ...
在Vue中,我们写在<template>标签内的内容都属于DOM节点,这部分内容会被最终转换成Vue中的虚拟DOM对象VNode,其中的步骤比较复杂,主要有以下几个过程: 抽取<template>内容进行compile编译。 得到AST语法树,并生成render方法。 执行render方法得到VNode对象。
// vnode定义:一种模拟dom节点的数据结构,其中包含的信息可以支撑vue去生成实际的dom节点,并正确同步所有用户设置的信息到dom上。 // 来看看vue中vnode相关实现: // 检测vnode类型 function isVNode(value) { return value ? value.__v_isVNode === true : false; } // 是否可以算为同一类型的vnode funct...
// 最后一步将虚拟dom转完的真实dom挂载到指定元素上 options.insert(child, parent) } const render = (vnode, container) => { // 把虚拟dom变成真实dom并添加到container里 // 判断container上有没有虚拟dom patch(container._vode || null, vnode, container); ...
公共$mount 方法实际上调用了 mountComponent 函数,它 core/instance/lifecycle.js 文件中定义,在mountComponent 函数中,实例化一个渲染Watcher,此时 Watcher 内部逻辑中调用定义的 updateComponent 函数。updateComponent 被调用, vm._render 执行生成 vnode,最终调用 _update 将 vnode 更新成 DOM,代码注释如下。