v-for
<p><strong>列表渲染</strong></p>
<hr />
<ul>
<li>遍历一个数组</li>
</ul>
<pre><code class="language-html">&lt;div v-for=&quot;item in itemList&quot;&gt;{{ item.name }}&lt;/div&gt;
&lt;div v-for=&quot;(item, index) in itemList&quot;&gt;{{ item.index }}&lt;/div&gt;</code></pre>
<hr />
<ul>
<li>遍历一个对象</li>
</ul>
<pre><code class="language-html">&lt;div v-for=&quot;(value, key, index) in obj&quot;&gt;{{ value }}&lt;/div&gt;</code></pre>
<hr />
<p><strong>通过 key 管理状态</strong></p>
<ul>
<li>当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染，所以每一项要添加一个唯一的key<strong>（diff算法）</strong></li>
</ul>
<pre><code class="language-html">&lt;div v-for=&quot;item in itemList&quot; :key=&quot;item.name&quot;&gt;{{ item.name }}&lt;/div&gt;</code></pre>
<ul>
<li>不要用index作为key，因为这个要被遍历的数组，每一项index不一定是固定的</li>
</ul>