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

你的名字 2022-11-26 15:52 111阅读 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 条评论，111人围观）

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

相关阅读

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

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

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

相关 vue核心面试题（为什么vue采用异步渲染）

前言：因为不采用异步更新，在每次更新数据都会对当前组件进行重新渲染。所以为了性能考虑，vue 会在本轮数据更新后，再去异步更新视图。 vu

亦凉/ 2023年02月20日 13:45/ 0 赞/ 176 阅读

相关 DOM面试题 ==

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

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

相关 vue核心面试题：Vue组件如何通信?

1.父子间通信源码位置：src/core/instance/events.js 父->子：通过 props 子-> 父：$on、$emit (发布订阅)

ゞ浴缸里的玫瑰/ 2022年12月18日 09:00/ 0 赞/ 141 阅读

相关 [Vue]vue核心面试题：组件中的data为什么是一个函数

1.vue中组件是用来复用的，为了防止data复用，将其定义为函数。 2.vue组件中的data数据都应该是相互隔离，互不影响的，组件每复用一次，data数据就应该被复制一次

淩亂°似流年/ 2022年12月15日 00:59/ 0 赞/ 248 阅读

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

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

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

相关 vue核心面试题：v-for中为什么要用key

一、v-for中为什么要用key 1.vue中列表循环需加:key="唯一标识" 唯一标识尽量是item里面id等，因为vue组件高度复用增加Key可以标识组件的唯一性，

爱被打了一巴掌/ 2022年11月27日 07:04/ 0 赞/ 134 阅读

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

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

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

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

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

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

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

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

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