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...
首先createVNode的第二个参数接收组件的props,从你的示例代码中看到{ref:refInputCom},实际上等于在InputCom组件中的defineProps声明了一个ref属性,上层组件传递了refInputCom给ref。放弃defineExpose写法,我们依靠defineProps来获取到子组件内的方法,详细代码如下 // InputCom let props = defineProps({ init:Function ...
执行销毁组件的逻辑if(container._vnode){unmount(container._vnode,null,null,true)}}else{//创建或更新组件patch(container._vnode||null,vnode,container)}//缓存vnode节点,表示已经渲染container._vnode = vnode}
功能二: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元素,并且存...
console.log(vnode) 第二步,实现挂载功能 在renderer.js文件中定义mount方法 constmount = (vnode, container) =>{//1、 将vnode变为elemnt,创建出真实的dom,并且在vnode上保存一份elconstel = vnode.el =document.createElement(vnode.tag)//2、处理propsif(vnode.props) {for(const keyinvnode.props) {con...
container:一个真实的 DOM 元素,作为虚拟 DOM 的挂载点,渲染器会把虚拟 DOM 挂载到该元素下。 渲染器的实现思路如下: 创建元素:把vnode.tag作为标签名,创建对应的 DOM 元素。 为元素添加属性和事件:遍历vnode.props对象,如果 key 以on开头,说明该属性是一个事件。把字符on去除并调用toLowerCase函数将事件名称小...
首发在我的博客 深入Vue3 虚拟 DOM 译自:diving-into-the-vue-3s-virtual-dom-medium 作者:Lachlan Miller 此篇我们将深入 Vue3 虚拟 DOM,以及了解它是如何遍历找到对应 vnode 的。 多数情况下我们不需要考虑 Vue 组件内部是如何构成的。但有一些库会帮助我们理解,比如 Vue Test Utils 的 findComponent 函数。
// vnode定义:一种模拟dom节点的数据结构,其中包含的信息可以支撑vue去生成实际的dom节点,并正确同步所有用户设置的信息到dom上。 // 来看看vue中vnode相关实现: // 检测vnode类型 function isVNode(value) { return value ? value.__v_isVNode === true : false; } // 是否可以算为同一类型的vnode funct...
【深入浅出】Vue3 虚拟 DOM 序言 作者:Lachlan Miller 此篇我们将深入 Vue3 虚拟 DOM,以及了解它是如何遍历找到对应 vnode 的。 多数情况下我们不需要考虑 Vue 组件内部是如何构成的。但有一些库会帮助我们理解,比如 Vue Test Utils 的 findComponent 函数。还有一个我们都应该很熟悉的 Vue 开发工具 —— Vue ...
【vue3源码】十二、认识虚拟DOM 什么是虚拟DOM? 虚拟DOM(也可以称为vnode)描述了一个真实的DOM结构,它和真实DOM一样都是由很多节点组成的一个树形结构。本质其实就是一个JS对象,如下就是一个vnode: { type: 'div', props: { id: 'container' }, children: [ { type: 'span', props: { class: 'span...