vue 深层次对象更新 视图不渲染问题

Question

有一个虚拟demo节点，结构如下

var obj={
    'tag':'div',
    'id':'111',
    'data':{
        'attrs':{'id':'1111'}
    },'children':[
    'tag':'div',
    'id':'111',
    'data':{
        'attrs':{'id':'1111'}
        },
    'children':[]
    ]
}

我用了vue中的render来渲染这个节点，直接用的render，this.list就是上面那个obj

<script>
  export default {
    name: "DomCreate",
    render(createElement){
      return createElement(this.list.tag,{...Object.assign(this.list.data)},this.list.children)
    },
    props:{
      list:Object
    }
  }
</script>

现在的问题是我用this.$set修改了obj.children[0].data.attrs.id='22222',为什么不触发render的渲染，强制渲染加了也不好使。而修改外层的obj.data.attrs.id就可以重新渲染。求教，谢谢大家

Answer 1

Vue不能检测以下变动的数组，是不会触发视图的更新：

1.当你利用索引直接设置一个项时，例如：vm.items[index] = newValue
2.当你修改数组的长度时，例如：vm.items.length = newLength

根据你的描述稍微把代码改一下

当前代码
obj.children[0].data.attrs.id='22222';

增加一行
Vue.set(this.obj.children , 0, this.obj.children[0]);