Deprecate v-repeat in favor of v-for #1200
Description
I am working on a new version of v-repeat, which is significantly more performant than the current version, but introduces a few breaking differences in terms of scoping. In order to keep backwards compatibility in the 1.0 migration, this new version will be introduced as v-for so that the original v-repeat can be left intact.
Current status: all tests passed. You can test v-for in the current 1.0.0-alpha branch.
Difference between v-for and v-repeat
Required alias
Alias is required when using v-for, and the item in items syntax is preferred. It reads more naturally:
<li v-for="item in items"></li>This also means the $value meta property will no longer be used. $index and $key are still available. You can also still refer to the parent scope index in nested loops as $parent.$index.
No more anonymous child VMs
Previously, v-repeat creates an actual child VM instance with inherit: true for every repeated block. This is no longer the case with v-for: each repeated block in v-for is now a real partially compiled fragment, with a lightweight intermediate "scope". This greatly reduces the overhead and as a result you should see significant performance improvement for both initial rendering (up to 100% for non-component loops) and re-rendering with track-by (up to 50%, as tested in dbmonster).
This also means:
- Using an extra
<template>repeat no longer creates the overhead of a child instance. v-refwould not work onv-forif the repeated block is not a component, because there are no longer anonymous child instances created in that case.
Component Scoping
Now this is the part that is the most different. Previously when you use a component with v-repeat, you get somewhat weird scoping:
<!-- can't use $index here -->
<comp v-repeat="item in list"></comp>In the above example, item and $index are automatically available inside the component, but not in the parent template. If you do want to use $index in the parent template, you have to create a <template> to wrap the repeat. In addition, this requires the component implementation to be aware that it is v-repeat specific, because the external data is not received via the standard props interface.
With v-for, you get the expected scoping:
<!-- using 1.0.0 binding syntax -->
<comp
v-for="item in list"
bind-id="$index"
bind-data="item">
</comp>And you need to explicitly pass external data into the component as props. This makes your component implementation no longer v-repeat specific and less magical.