钉子户 数组 对象 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);