Vue2：循环渲染(面试)；key值的意义

v-for

实例：

1.for和if放在了同一个标签中 没有先后顺序的要求,但是先执行for

渲染过程为：

对arr每一项先做map循环判断v-if给出的条件，再做一遍for 循环渲染

这样引起的问题是：arr 数组新增一项数据时，会对每一项再做一遍v-if 循环，然后for 循环渲染

2.解决方案把for弄到最外层(面试)

如果if和for套在一层,数据容器发生变化时,if会重新判断一遍 嵌套的写法 数据容器变化时 if只判断新增的数据 这样当arr 数组某一项数据发生变化时，只对新增的数据进行v-if 判断，节约渲染效率

这样又会产生新的问题:外层for的div会也创建一个挂载到DOM中

解决方案:wx采用的是block元素 vue呢? template 其实就是dom操作中的fragment

 

<div v-for="(item,index) in arr2" :key="item.id">
    <div class="box" v-if="item.age>=18">
        <p>{{item.name}}</p>
        <p>{{item.age}}</p>
        <p>{{item.info}}</p>
    </div>
</div>

3.key的意义(面试)

data中for循环的容器数据个数发生变化时,会跟for中的vm节点个数作比较 如果数据多了,会在vm节点后面增加对应数量的节点,并不会重新创建所有节点,然后vm去更新对应的DOM 然后就去刷新数据到界面: 按照for的数据容器中的数据顺序来渲染如果用户以前操作过旧节点,那么新数据顺序可能会出现跟旧节点顺序不匹配的效果(旧节点跟旧数据没有对应起来) 解决方案: for循环时把数据跟创建的节点利用给元素绑定唯一key值

简答:因为vue在刷新页面组件时,会把旧节点跟新vm节点做比较,如果要增加节点,并不会删除旧节点,而是复用 这样会导致节点跟数据没有绑定关系而重新渲染,用key可以将数据与节点绑定起来