vue 陣列和物件渲染問題

Timao發表於2018-09-20
Vue陣列物件

vue 陣列和物件渲染問題

最近專案有點忙碌，遇到好多問題都沒有總結(╥﹏╥)，在開發過程中，取vuex中的陣列渲染完成之後，再次修改陣列的值，資料更新了，但是檢視並沒有更新。以為是陣列更新的問題，後來又以為是因為vuex導致的問題. 最後強制重新整理元件解決了問題，但是還沒有找到根本問題的所在…

陣列更新檢測

  1. 在 vue 中使用陣列的push()、pop()、shift()、unshift()、splice()、sort()、reverse() 、filter()、concat() 方法時，改變陣列的同時可以觸發檢視的變化。
  2. 注意： 有兩種情況 vue 無法檢測到變動的陣列，分別是：

（1）直接運算元組的長度；

// Vue.set
this.$set(arr, indexOfItem, newValue)
// Array.prototype.splice
this.arr.splice(indexOfItem, 1, newValue)

(2)利用索引直接設定一個項時，例如：this.arr[indexOfItem] = newValue

this.arr.splice(newLength)

demo如下：

<template>
    <div class="demo">
        <div class="list-item" v-for="item in arr[0].elements" :key="item.name">{{item.name}}</div>
        <div class="change-btn" @click="changeArr">改變列表的值</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                index: 0,
                arr: [{
                    elements: [{
                        name: `0`
                    }, {
                        name: `1`
                    }, {
                        name: `2`
                    }]
                }]
    
            }
        },
        methods: {
            changeArr() {
                // 可以改變陣列的值
                 this.arr[0].elements.push({
                     name: `3`
                 })
                // this.arr[0].elements[1].name = `4`   可以改變陣列的值
                // this.arr[0].elements[1] = {      無法改變陣列的值
                //    name: `4`
                //  }
            }
        }
    }
</script>

物件更新檢測

方法一：this.$set()

方法二：Object.assign()

demo.vue

<template>
    <div class="demo">
        {{object}}
        <div class="change-btn" @click="changeArr">改變列表的值</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                index: 0,
                object: {
                    name: `haha`
                }
            }
        },
        methods: {
            changeArr() {
                //   方法一： 
                 this.$set(this.object, `age`, 27)
                //   方法二：
                  this.object = Object.assign({}, this.object, {
                    age: 27
                 })
                //  方法三： ---不可行
                 this.object.age = `27`
            }
        }
    }
    </script>

補充：
this.$forceUpdate()迫使 Vue 例項重新渲染。注意它僅僅影響例項本身和插入插槽內容的子元件，而不是所有子元件。
使用 v-if 在切換時，元素及它的繫結資料和元件都會被銷燬並重建

參考文獻

https://cn.vuejs.org/v2/api/#…
https://cn.vuejs.org/v2/guide…

相關文章