vue数组优化的两种方法track-by和key 这两个有什么区别

1.  v-bind:key="  " 是vue2.x提出的,1.x的写法是track-by=" "

2、(1)vue1.x中v-for不能显示重复数据,要在v-for的元素内定义track-by="$index",即以序号为索引,如此当增加或者删除数据,view都会跟着改变。但是需要注意如此修改的数据并不能同步到页面,因为其index并没有改变。如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>track-by和key</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in list" track-by="$index">{{item}}</li>
        </ul>
    </div>

    <script src="vue1026.js"></script>
    <script>

        var vm = new Vue({
            el:"#app",
            data:{
                list:['orange','pear','pear','lemon','peach'],
            }

        });
    </script>
</body>
</html>

(2)vue2.x中v-for可以显示重复的数据 ,不需要指定track-by或者key。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>track-by和key</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in list">{{item}}</li>
        </ul>
    </div>

    <script src="vue221.js"></script>
    <script>

        var vm = new Vue({
            el:"#app",
            data:{
                list:['orange','pear','pear','lemon','peach'],
            }

        });
    </script>
</body>
</html>

3、建议尽量在使用v-for时提供key,除非遍历结果不需更新。

4、理想的track-by和key是遍历对象每项都有且唯一的id

4、下面是vue2.x的官方文档对key的说明,可以知道v-for渲染元素列表默认用“就地复用”策略。

猜你喜欢

转载自blog.csdn.net/ion_L/article/details/82980706