在使用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变化后页面不会更新
注意
- 利用数组的索引设置一个新值到数组中,页面无法刷新
- 修改数组长度时,页面无法刷新
- Vue 将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新。这些被包裹过的方法包括:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
解决方法
- 改变引用地址
// var obj = {...obj1,...obj2}(剥离)
vm.arr = [...vm.arr,random];
- 使用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)
}
}
})
解决方法
- 使用this.$set方法
this.$set(vm.obj,'gender','male');
- 新增多个属性名和属性值的时候,使用Object.assign()方法
let address = {
province:'浙江省',
city:'合肥市'
}
this.obj = Object.assign({},this.obj,address);//改变引用地址
// 如下方式不会引起页面更新
Object.assign(this.obj,address);
- 强制vue实例重新渲染【不推荐】
Object.assign(this.obj,address);
this.$forceUpdate();
- 第三方库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);