vue组件data为数组或对象发生改变时不能被监听解决方案

问题描述：

父组件:

data() {
            return {
                box : [
                            {'symbol':'', 'type':'a', 'use':false},
                            {'symbol':'', 'type':'b', 'use':false},
                            {'symbol':'', 'type':'c', 'use':false},
                            {'symbol':'', 'type':'d', 'use':false}
                      ]

        }

}

子组件:

watch : {
            box : function (data) {
                //do something
            }
        }

当改变父组件box中的某个对象时，子组件不能监听到变化:

//这样是不行滴
Object.assign(this.box[1], {symbol:'b', use:true})

解决方案:

//方案一  js方法
this.box.splice(1, 1, {'symbol':'b', 'type':'b', 'use':true})
//方案二  vue封装的方法
//https://cn.vuejs.org/v2/api/#Vue-set
this.$set(this.box, 1, {'symbol':'b', 'type':'b', 'use':true})

引用：

https://blog.csdn.net/weixin_40260594/article/details/79079628