关于前端:面试题vue数组中对象变化页面不渲染问题

37次阅读

共计 593 个字符，预计需要花费 2 分钟才能阅读完成。

1.vue 数组中对象变动，页面不渲染问题

因为 js 限度，vue 不能检测一下状况变动：
1. 利用索引，批改数组第一项时；
vm.items[indexOfItem] = newValue
2. 当批改数组长度时；
vm.items.length = newLength

解决办法：

利用 Vue.set();
Vue.set(example1.items,indexOfItem,newValue);
或 example1.items.splice(indexOfItem,1,newValue);
解决第二种：example1.items.splice(newLength)；

对于 对象批改，页面没有渲染更新，Vue 不能更新根级别的响应式元素

var vm = new Vue({
data() {
    return {
        userProfile: {name: 'Anika'}
    };
}
})
userProfile 增加‘age’属性：
Vue.set(vm.userProfile,’age’,17);
或 this.$set(vm.userProfile,’age’,17);
若须要为已有对象赋予多个新属性：
Object.assign({},this.userProfile,{
'age':'16',
'like','li'
}
)
参考
https://www.cnblogs.com/think…
https://blog.csdn.net/qq_2546…