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...
constmount = (vnode, container) =>{//1、 将vnode变为elemnt,创建出真实的dom,并且在vnode上保存一份elconstel = vnode.el =document.createElement(vnode.tag)//2、处理propsif(vnode.props) {for(const keyinvnode.props) {constvalue =vnode.props[key]//判断传递过来的是否是方法,比如onClickif(key....
功能二:mount函数,用于将VNode挂载到DOM上; 功能三:patch函数,用于对两个VNode进行对比,决定如何处理新的VNode; h函数的实现:直接返回一个VNode对象即可 1 2 3 4 5 6 7 consth = (tag, props, children) => { return{ tag, props, children } } mount函数的实现: 第一步:根据tag,创建HTML元素,并且存...
functionpatch(n1,//旧的vnode,当n1==null时,表示时一次挂载的过程n2,//新的vnode,后续会根据这个vnode类型执行不同的处理逻辑container,//表示dom容器,在vnode渲染生成DOM后,会挂载到container下面anchor=null,parentComponent=null,parentSuspense=null,isSVG=false,optimized=false){//如果存在新旧节点,且新旧节点类...
// vnode定义:一种模拟dom节点的数据结构,其中包含的信息可以支撑vue去生成实际的dom节点,并正确同步所有用户设置的信息到dom上。 // 来看看vue中vnode相关实现: // 检测vnode类型 function isVNode(value) { return value ? value.__v_isVNode === true : false; } // 是否可以算为同一类型的vnode funct...
container:一个真实的 DOM 元素,作为虚拟 DOM 的挂载点,渲染器会把虚拟 DOM 挂载到该元素下。 渲染器的实现思路如下: 创建元素:把vnode.tag作为标签名,创建对应的 DOM 元素。 为元素添加属性和事件:遍历vnode.props对象,如果 key 以on开头,说明该属性是一个事件。把字符on去除并调用toLowerCase函数将事件名称小...
使用h函数 生成组件的vnode 使用render函数将组件挂载到dom上 下面我们先从vue源码中分析它是如何处理的: 1.1 源码阅读 根据之前的经验,我们知道vue的渲染逻辑,都会从render函数进入patch函数,所以我们可以直接在patch函数中进入debugger: 可以看到在patch方法中,最终会进入到processComponent方法去: ...
可以看到返回的虚拟DOM也是一个普通对象,我们传进去的组件选项会存储在type属性上。 虚拟DOM创建完后就会调用render方法将虚拟DOM渲染为实际的DOM节点,render方法是通过参数传给createAppAPI的: const render = (vnode, container, isSVG) => { if (vnode == null) { ...
vnode = h(ElImageViewer, { urlList: [binding.value],// 图片地址 hideOnClickModal:true,// 允许点击遮罩层关闭 }); }, }); } 第三步 使用 render 函数将 vnode 渲染到我们创建的div 里面,并且将我们创建的 div 插入到 body 里面 exportdefaultfunction(app){ ...
【vue3源码】十二、认识虚拟DOM 什么是虚拟DOM? 虚拟DOM(也可以称为vnode)描述了一个真实的DOM结构,它和真实DOM一样都是由很多节点组成的一个树形结构。本质其实就是一个JS对象,如下就是一个vnode: { type: 'div', props: { id: 'container' }, children: [ { type: 'span', props: { class: '...