解决Vue中数据改变,DOM未重新渲染的问题

组件内部,属性值地址空间内引用地址改变,DOM不能渲染。

问题举例:
数据改变了,但是页面没有渲染。

例:this.items = [[],[],[],[]]

问题原因:
这种情况下一般都是数组和json才会发生。

items 中,修改任意一项数组中的值,DOM是不会更新的。

解决方案:

this.items = [...this.items]。通过解构赋值,重新给items赋值。

组件之间传值,父组件传data改变,子组件未更新。

子组件中在mounted中对父组件传的值,进行了判断等相关处理,通过改变子组件自身定义的状态实现效果。
此时,父组件值更新,子组件不重新渲染,是因为,父组件值改变子组件不会走mounted的生命周期。

处理方案:

使用watch监听父组件传的值,当值改变的时候,进行对应操作。
推荐使用:
子组件中直接使用父组件传的值,如需类型转换或者简单判断,直接通过三目运算符判断使用,就省去了对 父组件传值的监听步骤。