mpvue
mpvue copied to clipboard
Meituan-Dianping
mpvue 多层级数据更新后视图不更新渲染
mpvue 多层级数据更新后视图渲染不更新
mpvue 版本号：
最小化复现代码：
<template>
<div>
<div> 一层级数据： {{text}}</div>
<div> 多层级数据： {{fields.info.text}}</div>
<div @click="onUpdate">更新数据</div>
</div>
</template>
<script>
export default {
data () {
return {
text: '1',
fields: {
info:{
text: '1'
}
}
}
},
methods: {
onUpdate(){
let random = Math.random();
this.text = random
this.fields.info.text = random;
console.log("一层级数据：："+this.text, "多层级数据："+this.fields.info.text);
}
}
}
</script>
问题复现步骤： data数据为多层级时，更新 data多层级中数据后页面不能渲染出来。
观察到的表现： 一层的数据更新没问题 fields.info.text 数据更新了 ，渲染没有更新
截图或动态图：
这样
var o = this. fields
this.fields = null
this.fields = o
或者
this.fields = Object.assign({}, this.fields)
或者（如果其他地方不需要引用原对象时）
JSON.parse(JSON.stringify(this.fields))
或者
// data 里加一个没用的东西
data () {
return {
temp: 1
}
}
// 需要刷新视图时改变了之后加一句：
this.fields.info.text = random
this.temp++
估计是最近的更新1.4.4 到 1.4.6 出现了新的bug。暂时切换到1.0.13 保平安。项目好大，不敢随便升级了。1.0.13的小程序插件bug只好先缓缓了。
亲测有效。得重新赋值this.arr = [...this.arr] 。具体参考找个https://github.com/Meituan-Dianping/mpvue/issues/1554
亲测有效。得重新赋值this.arr = [...this.arr] 。具体参考找个#1554++++++++++1； 赶紧修复一下吧，当前我使用的2.0版本。 总结几点 1 东西写错 根本不报错。直接不执行了。必须用debugger 一行一行往下找 看哪行跳走 2 就是不更新的问题，各种不更新。两层组件不更新 ， 就算更新了。会在尾部添加一个跟列表尾部一样的数据，个人觉得很奇葩 3 事件加不上 。。。。。等等问题
亲测有效。得重新赋值this.arr = [...this.arr] 。具体参考找个#1554++++++++++1； 赶紧修复一下吧，当前我使用的2.0版本。 总结几点 1 东西写错 根本不报错。直接不执行了。必须用debugger 一行一行往下找 看哪行跳走 2 就是不更新的问题，各种不更新。两层组件不更新 ， 就算更新了。会在尾部添加一个跟列表尾部一样的数据，个人觉得很奇葩 3 事件加不上 。。。。。等等问题
升级到2.0.6
亲测有效。得重新赋值this.arr = [...this.arr] 。具体参考找个#1554++++++++++1； 赶紧修复一下吧，当前我使用的2.0版本。 总结几点 1 东西写错 根本不报错。直接不执行了。必须用debugger 一行一行往下找 看哪行跳走 2 就是不更新的问题，各种不更新。两层组件不更新 ， 就算更新了。会在尾部添加一个跟列表尾部一样的数据，个人觉得很奇葩 3 事件加不上 。。。。。等等问题
升级到2.0.6
升级到2.0.6也还是没解决这个问题 多层级数据还是没更新
可以使用this.$set(this.fields, "info.text", 0.267)来触发视图更新
这样更新会导致，fields下创建了一个名为：info.text的key，而不是更新info object下的text key 坑大了！
亲测有效。得重新赋值this.arr = [...this.arr] 。具体参考找个#1554
把这个页面的方法试了一遍，就这个有效
我这个也没渲染出来怎么啊？
亲测有效。得重新赋值this.arr = [...this.arr] 。具体参考找个#1554
把这个页面的方法试了一遍，就这个有效
我这个也没渲染出来怎么啊？
我也用了，没用，楼上的方法全部试过，都没用。只能减少层级。
