前言：虚拟dom和 v-for中key的作用 一直是前端面试常问的难点之一，本文浅析一下如何回答这两个面试题····

目录

一.虚拟dom

1.虚拟dom本质：

2.虚拟dom好处：

3.数据更新时，虚拟dom高效执行的过程

4.diff算法比对规则（三种情况）

二.v-for中key的作用

一.虚拟dom

1.虚拟dom本质：

       是一个 js对象，用 js 对象来描述页面上真实的 dom 元素，是对真实dom的映射

//真实dom
hi


//虚dom

2.虚拟dom好处：

        2.1 轻量级 属性少 操作简单

        2.2 提高更新dom的性能，不用全部重新渲染

        2.3 每次操作真实dom会导致重绘和回流，操作虚拟dom能减少重绘 回流的次数（等数据全部渲染更新弄完之后，只会渲染实际改变过的地方，只会有一次重绘和回流）

        2.4 跨平台操作

        （如果是html浏览器渲染成真实的DOM
           如果是android,渲染成android对应UI代码
           如果是ios,渲染成对应I0S代码）

3.数据更新时，虚拟dom高效执行的过程

        3.1.先 （在beforeMounte阶段）组件/页面初始化的时候，根据初始数据生成一个新的虚拟dom（Vnodes）---将虚拟dom转换为真实dom---（在beforeUpdate）根据新的数据又生成一个新的虚拟dom

        3.2.新旧的虚拟dom diff算法找不同 采用广度优先（广度遍历）一层一层的进行同级比较

        3.3.找到不同的地方 打补丁（只更新不同的地方，没变的就不动）

4.diff算法比对规则（三种情况）

        4.1 元素/节点改变--删除元素--重建元素

        4.2 .元素不变，属性改变---只更新属性

        4.3 使用v-for遍历的情况

                4.3.1.如果没有key 就地复用（同4.3.2）

               4.3.2.如果有key 且key是index，那么还是就地复用===在同一个位置上，索引相同就会被认为是同一个元素，但是其实里面的内容不一样，会导致冗余的的更新操作

                4.3.3.如果有key 且key是id值，根据key能够精确的找到不同的那个元素，那么会直接插入一个新的元素。

                4.3.4.key的值 有id用id 无id用索引

二.v-for中key的作用

首先阐述：key的作用：

1.key作为特定的标识，主要用于vue新旧虚拟dom的diff算法比对，用key确定新旧dom里面的属性是否变化，

2.key的作用主要是为了高效的更新虚拟DOM。

其次讲一下key在v-for中的比对规则：

        1..如果没有key 就地复用

        2.如果有key 且key是index，那么还是就地复用===在同一个位置上，索引相同就会被认为是同一个元素，但是其实里面的内容不一样，会导致冗余的的更新操作

        3.如果有key 且key是id值，根据key能够精确的找到不同的那个元素，那么会直接插入一个新的元素。