vue 數組和對象渲染問題

數組更新檢測

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

（1）直接操作數組的長度；

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

代替方案如下

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

對象更新檢測

    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'
            }
        }
    }

this.$forceUpdate()迫使 Vue 實例重新渲染。注意它僅僅影響實例本身和插入插槽內容的子組件，而不是所有子組件。
使用 v-if 在切換時，元素及它的綁定數據和組件都會被銷毀並重建