Vue 数组和对象更新后页面 DOM (二)

上篇文章Vue 数组和对象更新后页面 DOM 不更新问题的解决方法。能够解决很多页面数据响应的问题，但是最近在项目中发现在某些情况下上篇文章的解决方式并不是针对任何问题的。

假设数据结构是下面的情况：

polist:{
    ...,
    list:{
        itemlist:[
            {a:1},
            {a:2}
        ]
    },
    ...
}

现在需要在某个方法中修改 修改 itemlist 数组中 index 为 1 的对象的 a 属性 。
使用上篇讲到的方法：

    <p>{{polist.list.itemlist[1].a}}</p>
    this.$set(this.polist.list.itemlist[1],'a',3)

发现页面中并没有发生变化，官网上面的解决方法在这种情况下并没有生效。
在这个问题上纠结了很久，试了又试，终于发现了问题所在，这种结构太深的数据结构， vue 并不会一直监视下去，所以数据结构不要超过 3 层。

所以要想实现上面的效果，需要想办法减少数据的层级，如果确实需要复杂的数据结构，可以在 data 中定义一个 list, 然后页面上绑定 list 中的值。

data(){
    return {
        itemlist:[]
    }
}
methods:{
    test(){
        this.list= this.polist.list

        this.$set(this.list.itemlist[1],'a',3)
    }
}