Vue 中的列表渲染

列表渲染<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)