v-for

v-for是vue中使用非常频繁的指令，用于做列表渲染，对于template的代码优化很有帮助。下面记录一些v-for使用中我碰到的坑...

key

key是vue中给dom或者组件添加的标记，有点像js中的id。它是vue中dom的唯一标识，vue是通过比对key来判断是否需要更新dom的。在使用v-for时，必须要给列表渲染的dom添加一个key以区分他们，否则vue发起一个警告。 一般我使用v-for时是使用的index作为key的，像这样

<p v-for=“（item，index）in list” :key="index">我是列表渲染的p标签</p>

对于遍历数组元素是简单类型时，这么写是没有问题的，但是如果数组元素是复杂类型是（例如：Object），这么写就有问题了，当我尝试修改数组中某个元素时（整体替换），发现dom并没有更新，网上查了资料之后发现，是由于vNode的diff算法中key的比对相同导致vue认为这里没有需要重新渲染的更新。解决办法时，key使用Object的唯一标识（一般都有id）。 id也不是绝对稳妥的，我在偶然间发现：当我修改复杂类型数组中的某一元素时（修改Object中的某一属性，该订单有更新，需要整体替换，但是id是一致的），这个时候我发现，数据源我修改成功了，但是这个订单并没有更新。解决办法是使用了后端返回的用于判断订单是否有更新的hash值作为key。