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)