vue考点 —— virtual dom

vdom是vue和React的核心。

• vdom是什么？为何会存在vdom?
• vdom如何应用，核心API是什么

一、vdom是什么？

虚拟DOM，用JS模拟DOM结构。DOM变化的对比，放在JS层来做（图灵完备语言）。提高重绘性能。

1、什么是图灵完备语言？

就是可以实现逻辑、判断、算法的语言。

2、什么是vdom?

这是一个真实的DOM

    
Item 1
    
Item 2

用JS来模拟上面的DOM，就是如下：

{
    tag: 'ul',
    attrs: {
        id: 'list'
    },
    children: [
        {
            tag: 'li',
            attrs: {className: 'item'},      //class是JS保留字，所以这里使用className
            children: ['Item 1']
        },{
            tag: 'li',
            attrs: {className: 'item'},
            children: ['Item 2']
        }
    ]
}

假设DOM发生了变化，我们在真实的DOM结构中，我们要进行DOM操作。而在虚拟的DOM结构中，我们只需要修改不一样的地方即可。为什么这样做，因为浏览器在进行DOM操作的时候消耗很大，而进行JS操作，操作很多次也没什么关系。DOM操作是最昂贵的，现在浏览器执行JS速度非常快。所以说用虚拟DOM。

二、设计场景（为什么会存在vdom）

将数据展示成一个表格。随便修改一个信息，表格也跟着修改。数据如下：

[
    {
        name: '张三',
        age: '20',
        address: '北京'
    },
    {
        name: '李四',
        age: '21',
        address: '上海'
    },
    {
        name: '王五',
        age: '22',
        address: '广州'
    }
]

1、用jQuery实现

    
    
    


    

    change
    

这样做的时候，每次点击click，table里面的所有内容都会重新渲染一次。DOM操作是非常昂贵的。这就是用jQuery实现的时候出现的问题。于是我们引出了vdom。

三、vdom如何应用？核心API是什么？

1、snabbdom?

h函数和pathch函数就是snabbdom的核心API，也就是vdom的核心API。

h函数就是定义一个虚拟DOM节点。

var vnode = h('ul#list', {}, [
    h('li.item', {}, 'Item1'),
    h('li.item', {}, 'Item2')
])


//对应的内容：
{
    tag: 'ul',
    attrs: {
        id: 'list'
    },
    children: [
        {
            tag: 'li',
            attrs: {className: 'item'},
            children: ['Item 1']
        },{
            tag: 'li',
            attrs: {className: 'item'},
            children: ['Item 2']
        }
    ]
}

patch函数

patch(container, vnode) //第一次渲染，container是一个真实的DOM节点，vnode是虚拟的DOM，将vnode放入到container中。
patch(vnode, newVnode)  //DOM有所改变时，将新的newVnode渲染到vnode中，这个过程中将进行复杂的对比，只修改不同的地方

如下是用vdom实现的一个例子：

    
    


    

    change
    
    
    
    
    
    
    

三、用vnode实现前面的设计场景如下：

    
    



change

四、vdom的核心API

• h('<标签名>',{...属性...},[...子元素...])
• h('<标签名>',{...属性...},'...')
• patch(container,vnode)
• patch(vnode,newVnode)