2018-03-26

计算属性的getter和setter我打算先放一放

列表渲染（一）

我们需要用v-for指令根据一组数组的选项列表进行渲染。item in items,items是源数据数组并且item是数组元素迭代的别名。

• 在v-for块中我们拥有对父作用域属性的完全访问权

这一点今天还真遇到了，有一个值，需要的数据还真不是在该v-for块中。使用方法是：变量前不同加item，直接绑定需要的数据。

• v-for还支持一个可选的第二个参数为当前项的索引，即：（item， index）in items index 从0开始计算。

说到index我记得我在我们项目的代码及看到过：<div v-for="（item， index）in items" :key=index>这种写法，我不知道对不对，因为key绑定的时唯一的标识。这个唯一的参照物如果是该数组，那就没问题。否则就不行。

• 我们可以用of 代替in来作为分隔符。

这里我觉得没有什么重点。只是说可以有两种写法，有什么区别到时没有说。

• 我们可以用v-for通过一个对象的属性来迭代。
  文中给出这段代码：

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

我感觉还是大多数都是会用数组，我没用过对象的属性来迭代，了解较少。但是从案例上来看，用对象来看，该方法不太适合渲染比较复杂的HTML段落。

• 对象迭代 可以提供两个参数：键名&索引。

key

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index" 。

这段话我的理解是：我们再更新数组中的数据时或改变数据项位置的时候，vue不会吧所有的元素都重新渲染，只渲染被改变的元素，其它的元素复用。

key需要用v-vind。其功能是给vue一个提示。以便它跟踪每个节点的身份。其目的是重用和重新排序现有元素。要求是相对唯一id. 文档建议尽可能在使用 v-for 时提供 key。

我觉得key就是vue定义的给数据的一个身份，文档中也说了：它是 Vue 识别节点的一个通用机制，key 并不与 v-for 特别关联，key 还具有其他用途