釘子戶 數組 對象 Vue 中 解決辦法

在使用vue的過程中發現，當我們對數組新增內容或者修改數組長度時，頁面內容不變。
當我們對對象新增屬性時，頁面內容也不發生變化。
以下總結了針對他倆的解決辦法。

數組

let vm = new Vue({
    el: '#app',
    data() {
        return {
            arr:[1,2,3,4,5],
            msg:'hello'
        }
    }
})  
setInterval(() => {
    // 生成隨機數
    let random = Math.ceil(Math.random()*10);
    // 追加到msg後面
    // vm.msg += random;
    
    vm.arr[vm.arr.length] = random;
    console.log(vm.arr);
}, 2000);

msg變化後頁面更新，但是arr變化後頁面不會更新

注意

1. 利用數組的索引設置一個新值到數組中，頁面無法刷新
2. 修改數組長度時，頁面無法刷新
3. Vue 將被偵聽的數組的變更方法進行了包裹，所以它們也將會觸發視圖更新。這些被包裹過的方法包括：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

解決方法

1. 改變引用地址
   // var obj = {...obj1,...obj2}(剝離)
vm.arr = [...vm.arr,random];
2. 使用Vue監聽的數組方法

對象

對象新增屬性時，無法引起頁面改變

let vm = new Vue({
    el: '#app',
    data() {
        return {
            obj:{
                name:'tom',
                age:25
            }
        }
    },methods: {
        add(){
            // 通過this直接訪問到data中數據
            this.obj.gender = 'male';
            alert(this.obj)
        }
    }
})  

解決方法

1. 使用this.$set方法

this.$set(vm.obj,'gender','male');

2. 新增多個屬性名和屬性值的時候，使用Object.assign()方法

let address = {
    province:'浙江省',
    city:'合肥市'
}
this.obj = Object.assign({},this.obj,address);//改變引用地址

// 如下方式不會引起頁面更新
Object.assign(this.obj,address);

3. 強制vue實例重新渲染【不推薦】

Object.assign(this.obj,address);
this.$forceUpdate();

4. 第三方庫lodash

<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.15/lodash.js"></script>

Object.assign(this.obj,address);
this.obj = _.clone(this.obj);