瀏覽代碼

document v-repeat trackby usage

Evan You 11 年之前
父節點
當前提交
377350ecaa
共有 1 個文件被更改,包括 22 次插入0 次删除
  1. 22 0
      changes.md

+ 22 - 0
changes.md

@@ -279,6 +279,28 @@ computed: {
 
 
     When used as a dynamic component, it will check for the `keep-alive` attribute. When `keep-alive` is present, already instantiated components will be cached. This is useful when you have large, nested view components and want to maintain the state when switching views.
     When used as a dynamic component, it will check for the `keep-alive` attribute. When `keep-alive` is present, already instantiated components will be cached. This is useful when you have large, nested view components and want to maintain the state when switching views.
 
 
+  - `v-repeat`
+
+    One of the questions I've asked about is how `v-repeat` does the array diffing and what happens if we swap the array with a fresh array grabbed from an API end point. In 0.10 because the objects are different, all instances have to been re-created. In 0.11 we introduce the `trackby` attribute param. If each of your data objects in the array has a unique id, we can use that id to reuse existing instances when the array is swapped.
+
+    For example, if we have the data in the following format:
+
+    ``` js
+    items: [
+      { _id: 1, ... },
+      { _id: 2, ... },
+      { _id: 3, ... }
+    ]
+    ```
+
+    In your template you can do:
+
+    ``` html
+    <li v-repeat="items" trackby="_id">...</li>
+    ```
+
+    Later on when you swap `items` with a different array, even if the objects it contains are new, as long as they have the same trackby id we can still efficiently reuse existing instances.
+
 - #### Usage change for `v-with`
 - #### Usage change for `v-with`
 
 
   In 0.10 and earlier, `v-with` creates a two-way binding between the parent and child instance. In 0.11, it no longer creates a two-way binding but rather facilitates a unidirectional data flow from parent to child.
   In 0.10 and earlier, `v-with` creates a two-way binding between the parent and child instance. In 0.11, it no longer creates a two-way binding but rather facilitates a unidirectional data flow from parent to child.