vue学习之路---基础（实例方法/特殊属性）

vue为什么会有key的属性？

      vue为了高效率渲染页面，会复用已有元素，也就是说不会从头开始渲染元素。但是有些时候我们并不希望是复用元素，比如说在v-for循环列表的时候，我们是希望所有的选项（包括相同的元素选项）都是可以渲染到页面上的。vue2.0中提出的解决办法：key的特殊属性。

key属性的小理解：

      比如说，我们在页面上

[code]<template v-if="login=='username'"> <label>name</label> <input placeholder="请输入您的名字"> </template> <template v-else> <label>phone</label> <input placeholder="请输入您的邮箱"> </template>     因为用的是相同的模板，我们在之前输入的名字，在替换的时候，还是会保留，这并不是我们所想要的效果。那么这个时候key这个特殊属性就会大显身手了。解决办法如下

<template v-if="login=='username'">
<label>name</label>
<input placeholder="请输入您的名字" key="user">
</template>
<template v-else>
<label>phone</label>
<input placeholder="请输入您的邮箱" key="phone">
</template>

    再比如说当我们写循环数据的时候

<div v-for="item in items" :key="item.id">
{{item}}
</div>

此时的key就相当于vue2.0版本的track by,只是小编的理解，反正起到的效果是，items里面重复的item都可以在页面中渲染出来。

楼上全部，只是key属性的部分应用。因为工作中项目的问题，接下来小编想给大家总结一下v-for里面（index，key，id）哪一个和key属性绑定，页面渲染效果会更好。

    结论: 使用v-for渲染元素时，使用元素自身的id属性去制定渲染元素的key属性有利于单个元素的渲染；若采用其他如v-for提供的index，key 等值，在渲染的时候会刷新整个页面重新渲染，所以小编比较推荐使用id与key属性绑定。

 

  

    

     

阅读更多