虚拟DOM学习与总结

虚拟DOM

　　虚拟DOM简而言之就是，用JS去按照DOM结构来实现的树形结构对象，一般称之为虚拟节点(VNode)

        优点：解决浏览器性能问题 ，真实DOM频繁排版与重绘的效率是相当低的,虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分（注意！），最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗。

例子1：

<div>我是文本</div>

let VNode = {
    tag:'div',
    children:'我是文本'
}

例子2：

<div class="container" style="color:yellow"></div>

let VNode = {
    tag:'div',
    data:{
        class:'container',
        style:{
            color:'yellow'
        }
    },
    children:''
}

例子3：

<div class="container">
    <h1 style="color:red">标题</h1>
    <span style="color:grey">内容</span>
    <span></span>
<div> 

let VNode = {
    tag: 'div',
    data:{
        class:'container'
    },
    children:[
        {
            tag:'h1',
            data：null,
            children:{
                data: {
                    style:{
                        color:'red'
                    }
                },
                children: '标题'
            }
        },
        {
            tag:'span',
            data:null,
            children:{
                data: {
                    style:{
                        color:'grey'
                    }
                },
                children: '内容'
            }
        },
        {
            tag:'span',
            data:null,
            children:''
        }
    ]
}

 看完了例子,聪明的你一定知道了什么是虚拟dom。

 snabbdom

 先看一眼github上的例子

 snabbdom有几个核心函数,h函数，render函数和patch函数。

 h函数

 用于创建VNode（virtual node虚拟节点），追踪dom变化的。

 React中通过babel将JSX转换为h函数的形式，Vue中通过vue-loader将模板转换为h函数。

假设在vue中我们有如下模板

<template>
    <div>
        <h1></h1>
    </div>
</template>

用h函数来创建与之相符的VNode：

const VNode = h('div',null,h('h1'))

得到的VNode对象如下：

const VNode = {
  tag: 'div',
  data: null,
  children: {
    tag: 'span',
    data: null,
    children: null
  }
}

 什么是虚拟DOM的挂载

虚拟DOM挂载：将虚拟DOM转化为真实DOM的过程

虚拟DOM更新：当节点对应得vnode发生改变时，比较新旧vnode的异同，从而更新真实的DOM节点。

主要用到如下原生属性或原生方法：

• 创建标签：document.createElement(tag)

• 创建文本：document.createTextNode(text);

• 追加节点：parentElement.appendChild(element)

 render函数

 将VNode转化为真实DOM

 接收两个参数：

• 虚拟节点
• 挂载的容器

function render(VNode,container){
    //... 
}

 

patch函数

 想了半天没想到怎么描述，我个人的理解就是，挂载更新，