vue核心面试题：用vnode来描述一个dom结构

你的名字 2022-11-26 15:52 236阅读 0赞

vnode虚拟节点就是用一个对象来描述真实的 dom 元素，在Vue.js 中虚拟 DOM 的 JavaScript 对象就是 VNode

例子：用js对象描述一个dom

<div id="container"><p></p></div>
    // 下面就描述了上面的dom
    let obj = {
      tag: 'div',
      data: {
        id: 'container'
      },
      children: [{
        tag: 'p',
        data: {},
        children: []
      }]
    }
    
    render () {
      return _c('div', {id: 'container'}, _c('p', {}))
    }

# vue中这样实现（先将dom转换成ast语法树再生成vnode）  #

function _c(tag, data, ...children){
           let key = data.key;
           delete data.key;
           children = children.map(child=>{
               if(typeof child === 'object'){
                   return child
               }else{
                   return vnode(undefined,undefined,undefined,undefined,child)
               }
           })
           return vnode(tag,data,key,children); 
       }
       function vnode(tag,data,key,children,text,elm){
           return {
               tag, // 表示的是当前的标签名
               data, // 表示的是当前标签上的属性
               key, // 唯一表示用户可能传递，在diff过程中可以提高diff的效率
               children, // 属性是vnode的子节点
               text, // 属性是文本属性
               elm // 真实的dom节点
           }
        }
       
       let a = _c('div', {id: 'container'}, _c('p', {}, 'hello'), 'word')
       console.log(a)
    
       // 输出来的信息
    {    
      tag: 'div',
      data: { id: 'container' },
      key: undefined,
      children: [
        {
          tag: 'p',
          data: {},
          key: undefined,
          children: [
            {
               tag: undefined,
               data: undefined,
               key: undefined,
               children: undefined,
               text: 'hello',
               elm: undefined
            }
          ],
          text: undefined,
          elm: undefined
        },
        {
          tag: undefined,
          data: undefined,
          key: undefined,
          children: undefined,
          text: 'word',
          elm: undefined
        }
      ],
      text: undefined,
      elm: undefined
    }

函数的第一次tag就是元素标签，data就是属性，children就是子节点，里面会先对子节点进行判断，看是否是一个对象，如果是对象就直接将该对象赋值给children，如果不是对象（当它不是对象时这时就是一个文本）然后调用一个vnode方法，通过这个方法把让他转成一个对象。最后调用vnode将传入参数输出一个对象，这个对象就能描述这个dom结构。这儿使用递归方法实现。

# vue中vnode虚拟dom生成流程 #

template->ast语法树->通过codegen转化成render函数->内部调用的就是\_c方法->vnode

**补充说明：**

template编译出来的是render函数，render函数中会给你一个createElement，createElement执行之后才是vnode。

发表评论取消回复

表情：

评论列表（有 0 条评论，236人围观）

还没有评论，来说两句吧...

相关阅读

相关 DOM操作重点核心(2) 面试题

创建元素我们了解过创建元素的三种方法,当然现在我们来深入了解一下第一种方法 document.write() 这一个方法是直接将内容写入页面的

男娘i/ 2023年07月03日 12:07/ 0 赞/ 32 阅读

相关实现 Virtual DOM 下的一个 VNode 节点

实现 Virtual DOM 下的一个 VNode 节点什么是VNode 我们知道，render function 会被转化成 VNode 节点。Virtu

本是古典何须时尚/ 2023年03月01日 10:46/ 0 赞/ 95 阅读

相关 vue核心面试题（零碎题）

一、在开发中，你将ajax请求放在哪个生命周期中 1.一般ajax请求可以放置的位置在created和mounted中。 2.在created的时候已经可以拿到数据，视

た入场券/ 2023年02月25日 02:13/ 0 赞/ 107 阅读

相关 vue核心面试题（nextTick实现原理）

概念： nextTick就是一个异步方法。nextTick 方法主要是使用了宏任务和微任务（事件循环机制），定义了一个异步方法，多次调用 nextTick 会将方法存入

青旅半醒/ 2023年02月20日 13:51/ 0 赞/ 237 阅读

相关 vue核心面试题（MVVM原理）

一、谈一下你对MVVM原理的理解 1.MVC是Model-View- Controller的简写。即模型-视图-控制器。是最早的架构模型，是从前台到后台统一称之为MVC，

傷城~/ 2023年02月17日 02:36/ 0 赞/ 124 阅读

相关 DOM面试题 ==

DOM面试题 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

谁借莪１个温暖的怀抱￠/ 2022年12月27日 07:27/ 0 赞/ 216 阅读

相关 vue核心面试题：描述组件渲染和更新过程

一、概念：渲染组件时，会通过 Vue.extend 方法构建子组件的构造函数，初始化组件的时候会进行实例化。终手动调用 $mount() 进行组件挂载渲染。更新组件时会

忘是亡心i/ 2022年11月27日 08:48/ 0 赞/ 334 阅读

相关 vue核心面试题：diff算法

一、diff算法的时间复杂度两个树的完全的 diff 算法是一个时间复杂度为 O(n3) , Vue 进行了优化·O(n3) 复杂度的问题转换成 O(n) 复杂度的问

小灰灰/ 2022年11月27日 00:48/ 0 赞/ 370 阅读

相关 vue核心面试题：用vnode来描述一个dom结构

vnode虚拟节点就是用一个对象来描述真实的 dom 元素，在Vue.js 中虚拟 DOM 的 JavaScript 对象就是 VNode 例子：用js对象描述一个dom

你的名字/ 2022年11月26日 15:52/ 0 赞/ 237 阅读

相关 Vue.js--Virtual Dom概述、VNode类型与属性详解

Virtual Dom Virtual Dom并不是真正意义上的DOM，而是一个轻量级的JavaScript对象，在状态发生变化时，Virtual Dom会进行Diff运

绝地灬酷狼/ 2021年08月13日 16:39/ 0 赞/ 627 阅读