前端100问：

第 1 题：（滴滴、饿了么）写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？

理解几个概念：
（1）当数据发生变化时，vue是怎么更新节点的？
改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和重排。
diff算法能够帮助我们，先根据真实DOM生成一颗virtual DOM，当virtual DOM某个节点的数据改变后会生成一个新的Vnode，然后Vnode和oldVnode作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使oldVnode的值为Vnode。
diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁。
（2）.virtual DOM和真实DOM的区别？
virtual DOM是将真实的DOM的数据抽取出来，以对象的形式模拟树形结构。比如dom是这样的：

<div>
    <p>123</p>
</div>

对应的virtual DOM（伪代码）：

 var Vnode = {
        tag: 'div',
        children: [
            { tag: 'p', text: '123' }
        ]
    };