vue中深层对象赋值,页面未渲染 - VicSh/my-web-log GitHub Wiki
问题
vue中对象嵌套层数过多,会导致给对象中的某个属性赋值或添加、删除属性的时候,页面视图不更新
情况一
在解决问题之前,我们先来了解下 vue响应性原理: Vue最显著的一个功能是响应系统-- 模型只是一个普通对象,修改对象则会更新视图。 受到javascript的限制,Vue不能检测到对象属性的添加或删除,因为vue在初始化实列时将属性转为getter/setter,所以属性必须在data对象上才能让vue转换它。但是vue可以使用 Vue.set(object, key, value)方法将响应属性添加到嵌套的对象上
Vue.set(obj, '_isHover', true);
或者可以使用vm.$set的实列方法,也是Vue.set方法的别名:
this.$set(obj, '_isHover', false);
情况二
数据层次太多,没有触发render函数进行自动更新,需手动调用,调用方式如下:
this.$forceUpdate();
附原文地址:https://blog.csdn.net/weixin_40260594/article/details/79079628