vue为什么要用:key

不用:key

<div id="app">
		<div>
			<input type="text" v-model="name">
			<button @click="add">添加</button>
		</div>
		<ul>
			<li v-for="(item, i) in list">
				<input type="checkbox"> {{item.name}} {{i}}
			</li>
		</ul>
</div>

new Vue({
	el: '#app',
	data: {
		name: '',
		newId: 3,
		list: [
			{ id: 1, name: '张三' },
			{ id: 2, name: '吕布' },
			{ id: 3, name: '李斯' }
		]
	},
	methods: {
		add() {
			//注意这里是unshift
			this.list.unshift({ 
				id: ++this.newId,
			 	name: this.name 
			 })
			this.name = ''
		}
	}
})

用key

<div id="app">
		<div>
			<input type="text" v-model="name">
			<button @click="add">添加</button>
		</div>
		<ul>
			<li v-for="(item, i) in list" :key="item.id">
				<input type="checkbox"> {{item.name}} {{i}}
			</li>
		</ul>
</div>

new Vue({
	el: '#app',
	data: {
		name: '',
		newId: 3,
		list: [
			{ id: 1, name: '张三' },
			{ id: 2, name: '吕布' },
			{ id: 3, name: '李斯' }
		]
	},
	methods: {
		add() {
			//注意这里是unshift
			this.list.unshift({ 
				id: ++this.newId,
			 	name: this.name 
			 })
			this.name = ''
		}
	}
})