09/06 trackby.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
    .blue {
        color: blue;
    }
    </style>
</head>

<body>
    <div id="example-1">
        <ul>
            <template v-for="item in items" track-by="_uid">
                <li>{{$index}}.{{ item._uid }}</li>
            </template>
        </ul>

        <div class="blue">
            {{$data | json }}
        </div>
        <pre>

有时需要用全新对象（例如通过 API 调用创建的对象）替换数组。
因为 v-for 默认通过数据对象的特征来决定对已有作用域和 DOM 元素的复用程度，这可能导致重新渲染整个列表。
但是，如果每个对象都有一个唯一 ID 的属性，
便可以使用 track-by 特性给 Vue.js 一个提示，Vue.js 因而能尽可能地复用已有实例。

如果 Vue.js 遇到一个包含 _uid: '88f869d' 的新对象
它知道它可以复用这个已有对象的作用域与 DOM 元素。

台湾小凡：简单讲，就是 v-for 遍历 model 时，vue.js ，会建立索引键，这个键要求是不重复，不然会出错
track-by="_uid", 使用者指定 索引键，是那个部份
        </pre>
    </div>
    <script>
    var example1 = new Vue({
        el: '#example-1',
        data: {
            items: [{
                _uid: '88f869d',

            }, {
                _uid: '7496c10',
            }]
        }
    })
    </script>
</body>

</html>