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 ...
功能二: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元素,并且存...
执行销毁组件的逻辑if(container._vnode){unmount(container._vnode,null,null,true)}}else{//创建或更新组件patch(container._vnode||null,vnode,container)}//缓存vnode节点,表示已经渲染container._vnode = vnode}
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 函数。
与React 一样,Vue 在处理虚拟 DOM 的更新时,也有自己的 diff 算法 —— patch。 什么是 patch Vue 在通过 VNode 节点渲染 DOM 时,并不是通过当前的 VNode 节点去暴力的更新 DOM 节点,而是对新旧两个 VNode 节点通过 patch 算法进行比较,然后通过对比结果找出差异的属性或节点进行按需更细。显而易见,patch 能...
【深入浅出】Vue3 虚拟 DOM 序言 作者:Lachlan Miller 此篇我们将深入 Vue3 虚拟 DOM,以及了解它是如何遍历找到对应 vnode 的。 多数情况下我们不需要考虑 Vue 组件内部是如何构成的。但有一些库会帮助我们理解,比如 Vue Test Utils 的 findComponent 函数。还有一个我们都应该很熟悉的 Vue 开发工具 —— Vue ...
简介:此篇我们将深入 Vue3 虚拟 DOM,以及了解它是如何遍历找到对应 vnode 的。 序言 首发在我的博客深入 Vue3 虚拟 DOM 译自:diving-into-the-vue-3s-virtual-dom-medium 作者:Lachlan Miller 此篇我们将深入 Vue3 虚拟 DOM,以及了解它是如何遍历找到对应 vnode 的。