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