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)