Vue列表渲染的示例代码

2020-06-14 06:21:03易采站长站整理

数组更新检测

(1)变异方法

Vue包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:


push()
pop()
shift()
unshift()
splice()
sort()
reverse()

(2)替换数组

变异方法,是会改变被这些方法调用的原始数组。相比之下也有非变异方法:


filter()
concat()
slice()

这些方法不会改变原始数组,但是总会返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组:


ex.items = ex.items.filter(function(item) {
return item.message.match(/Foo/)
})

你可能认为这将导致Vue丢弃现有DOM并重新渲染整个列表。Vue为了使得DOM得到最大范围的重用而实现了一些智能的、启发式的方法,所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

注意事项

由于JavaScript的限制,Vue补鞥呢检测以下变动的数组:

1. 当你用索引直接设置一个项的时候:vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时,例如:vm.items.length = newLenth

举个例子:


var vm = new Vue({
data: {
items: ['a','b','c'] }
})
vm.items[1] = 'x' //不是响应式的
vm.items.length = 2// 不是响应式的

为了解决第一类问题,以下两种方式都可以实现vm.items[i] = newVal相同的效果,同时也会触发响应式更新:


//Vue.set
Vue.set(vm.items, i, newVal)

//Array.prototype.splice
vm.items.splice(i, 1, newVal)

也可以使用vm.$set实例方法,该方法是全局方法Vue.set的一个别名:


vm.$set(vm.items, i, newVal)

为了解决第二类问题,可以使用splice:


vm.items.splice(newLenght)

对象更改检测注意事项

由于JavaScript的限制,Vue不能检测对象属性的添加或删除:


var vm = new Vue({
data: {
a: 1
}
})
//vm.a是响应式的
//vm.b不是响应式的

对于已经创建的实例,Vue不能动态添加根级别的响应式属性,但是可以通过Vue.set(obj,key,value)方法向嵌套对象添加响应式属性。


var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})

你可以添加一个新age属性嵌套的userProfile对象: