vue.js中v-for中key的作用

一、当数据发生变化时，vue是怎么更新节点的？

要渲染真实DOM的开销是很大的，比如有时候，我们修改了某个书记，如果直接渲染到真实DOM上会引起整个DOM树的重绘和重排，有没有可能我们只更新我们修改的那一块DOM而不要更新整个dom呢？

diff算法能够帮助我们。

我们先根据真实DOM生成一颗virtual DOM，当virtual DOM某个节点的数据改变后悔生成一个新的Vnode，然后Vnode和oldVnode作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使用oldVnode的值为Vnode。

diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁。

二、virtual DOM和真实DOM的区别？

virtual DOM是真实的DOM的数据抽取出来，以对象的形式摸你树形结构。比如DOM是这样的：

    <div>
        <p>vuejs渐进式框架</p>
    </div>

对应的virtual DOM(伪代码)：

    <script>
        var Vnode = {
            tag:'div',
            children:[
                {
                    tag:'p',
                    text:'vuejs渐进式框架'
                }
            ]
        }
    </script>

三、diff的比较方式

在采用diff算法比较新旧节点的时候，比较只会在同层级进行，不会跨层级比较。