017 vue 关于 v-for 指令内部算法

组件的key属性,我们在说组件复用的时候 说过这个 key 属性 ,但是呢 这个key 属性,我们也希望加在v-for 中的:

官方推荐我们在使用v-for时,给对应的元素或组件添加上一个:key属性。

因为:

这个其实和Vue的虚拟DOM的Diff算法有关系。这里我们借用React’s diff algorithm中的一张图来简单说明一下:

当某一层有很多相同的节点时,也就是列表节点时,我们希望插入一个新 的节点: 【a,b,c,d,e】

我们希望可以在B和C之间加一个F,Diff算法默认执行起来是这样的,即把C更新成F,D更新成C,E更新成D,最后再插入E,是不是很没有 效率?

所以我们需要使用key来给每个节点做一个唯一标识:

Diff算法就可以正确的识别此节点

找到正确的位置区插入新的节点。

确保不会位移式的更新

所以一句话,key的作用主要是为了高效的更新虚拟DOM。

具体怎么加上去  那么我们需要用语法糖 然后绑定 item即可  【很多人绑index  没什么作用】

代码:

<!doctype html>
<html lang="en">
<head>

    <meta charset="UTF-8">
</head>
<body>
<script src="js/vue.js"></script>
<div class="app">
        <ul>
            <li v-for="item in info" :key="item">{{item}}</li>
        </ul>
</div>

<script>
    const app = new Vue({
        el:".app",
        data:{
            info:['a','b','c','d','e']
        }
    })

    //在 a 和 b 中间插入c:
    app.info.splice(2,0,'f');       //上面加了key- 绑定了 item  所以呢 这里插入效率变高
</script>
</body>
</html>

听说以后后端 会用id 绑 ,现在了解原理即可....

本文来自博客园,作者:咸瑜,转载请注明原文链接:https://www.cnblogs.com/bi-hu/p/14975958.html

原文地址:https://www.cnblogs.com/bi-hu/p/14975958.html