共计 2416 个字符，预计需要花费 7 分钟才能阅读完成。
列表渲染
<div id=”app”>
<div v-for=”(item,index) of list” :key=”index”>
{{item}} —- {{index}}
</div>
</div>
let vm = new Vue({
el: ‘#app’,
data: {
list: [
“hello”,”Dell”,”nice”,”to”,”meet”,”you”
]
}
})
上面是一个最基础的列表渲染，在实际开发中，还有很多细节点，为了提升循环的性能，会给循环项加一个唯一的 key 值。我们可以用 index 作为唯一的 key 值。
其实不推荐大家这样使用 index 的，因为这样使用 index 作为 key 值，在你频繁操作 dom 元素时，会比较费性能，无法充分让 Vue 复用 dom。
key 值
不用 index 作为 key 值，那用什么作为 key 呢？一般来说每个数据都有唯一的一个 id，用它来作为 key 值就行了。
如下：
<div id=”app”>
<div v-for=”(item,index) of list”
:key=”item.id”> //key 值就没有必要使用 index
{{item.text}} —- {{index}}
</div>
</div>
let vm = new Vue({
el: ‘#app’,
data: {
list: [
{id: 1, text: ‘hello’},
{id: 2, text: ‘Dell’},
{id: 3, text: ‘Lee’}
]
}
})
列表提高性能，要在每一项上带一个 key 值，key 值要唯一，且最好不要用 index 做 key 值。
往列表项添加内容
往列表项里面添加内容，只需使用 push 语法就可以了。
vm.list.push({id: 4,text: ‘I am tiantian’})
有时候会这样写
vm.list[4] = {id: 4,text: ‘I am tiantian’}
这样写其实是有问题的，列表虽然更新了，但是页面却没有更新。这是为什么呢？
当我们尝试修改数组内容的时候，不能通过下标的形式来改变这个数组，我们只能通过 Vue 提供的几个数组变异方法，来操作数组，才能够实现，数据发生变化，页面也能发生变化这种效果。
Vue 提供了七种数据变异方法，分别是：push、pop、shift、unshift、splice、sort、reverse
改变引用
除了使用变异方法，我们还能使用其他方法吗？改变数据的引用
vm.list = [
{id: 1, text: ‘hello’},
{id: 2, text: ‘Dell’},
{id: 3, text: ‘Lee’},
{id: 4, text: ‘I am tiantian’},
]
这时候你会发现，数据变了，页面也会跟着重新渲染。
循环多项
如果还有一个元素需要循环，在写一层循环的话，性能肯定会有影响。
<div id=”app”>
<div v-for=”(item,index) of list”
:key=”item.id”>
{{item.text}} —- {{index}}
</div>
<span v-for=”(item,index) of list”
:key=”item.id”>
{{item.text}}
</span>
</div>
let vm = new Vue({
el: ‘#app’,
data: {
list: [
{id: 1, text: ‘hello’},
{id: 2, text: ‘Dell’},
{id: 3, text: ‘Lee’}
]
}
})
很容易就想到，那么我在外面加一层 div 不就行了。
<div id=”app”>
<div v-for=”(item,index) of list”
:key=”item.id”>
<div>
{{item.text}} —- {{index}}
</div>
<span>
{{item.text}}
</span>
</div>
</div>
let vm = new Vue({
el: ‘#app’,
data: {
list: [
{id: 1, text: ‘hello’},
{id: 2, text: ‘Dell’},
{id: 3, text: ‘Lee’}
]
}
})
这两段代码的区别是，用 template 渲染的，最外层没有 div，而上面一段，最外层会有一个 div
<div id=”app”>
<template v-for=”(item,index) of list”
:key=”item.id”>
<div>
{{item.text}} —- {{index}}
</div>
<span>
{{item.text}}
</span>
</template>
</div>
let vm = new Vue({
el: ‘#app’,
data: {
list: [
{id: 1, text: ‘hello’},
{id: 2, text: ‘Dell’},
{id: 3, text: ‘Lee’}
]
}
})
对象中的 set 方法
对象的循环和数组一样，可以通过改变引用方式，更新数据。
除了这种方式之外，那我们还有其他方法更新数据吗？
全局方法：Vue.set()
let vm = new Vue({
el: ‘#app’,
data: {
userInfo: {
name: ‘tiantain’,
age: 28,
gender: ‘male’,
salary: ‘secrey’
}
}
})
Vue.set(vm.userInfo,’address’,’beijing’) // 通过 Vue 提供的 set 方法，可以实现，数据更新，页面更着更新。
除了直接改变数据的引用，还可以利用 Vue 提供的 set 方法去改变数据
实例方法：vm.$set()
vm.$set(vm.userInfo,’address’,’beijing’) // 通过 Vue 提供的 set 方法，可以实现，数据更新，页面更着更新。
如果 useriInfo 是个数组，也可以使用 set 方法
全局方法：
let vm = new Vue({
el: ‘#app’,
data: {
userInfo: [1,2,3,4]
}
})
Vue.set(vm.userInfo,2,44)
实例方法：
vm.$set(vm.userInfo,2,44)
