change
    

当点击change按钮后

如果原生js进行这样的操作，势必会进行重排，但是页面只是局部改变，但vue引入虚拟dom之后大大节省了耗能

那什么是虚拟DOM？

在vue中，执行渲染函数前就可以得到一个虚拟节点树，使用虚拟节点树就可以渲染页面。当页面dom节点动态改变时，在渲染之前，会使用新生成的虚拟节点和上一次生成的虚拟节点进行对比，只渲染不同的部分，各个虚拟节点就是一个对象，描述了一层容器的特征，下面是vue代码中点击前change按钮前的虚拟节点树

vndoe = {
    tag: 'ul',
    children: [
        { tag: 'li',key:0, children: [{ vnode: { text: '3' } }] },
        { tag: 'li',key:1, children: [{ vnode: { text: '2' } }] },
        { tag: 'li',key:2, children: [{ vnode: { text: '1' } }] }

    ]
}复制代码

当点击change之后会生成新的虚拟节点树和它对比

对比过后，仅仅渲染不同的地方

那怎样去找到2个虚拟节点数的不同之处呢？这就涉及到了vue源码的diff算法

当生命周期挂载完毕后，只要数据源变化，就一定会触发watcher观察者的回调 去驱动视图更新 vm._update(v_rander())
_update会生成vnode去_patch_查找不同
_patch_中启动的就是diff算法

key就是唯一标识 为了让diff算法更准确找到需要对比的两个节点

2.那为什么不能用index作为key

我们还是用先前的代码来看，在diff算法中，key就是唯一标识，当2个虚拟节点树进行对比时，会找到相同的key值进行对比，发现key值相同但里面的数据不同，diff算法就会认定它改变了将它重新渲染，而事实上，他们只是位置变了，当我们给它加上唯一标识id时

                                
                    
        change