Vue开发遇到的一些问题（一）

Vue开发遇到的一些问题（一）

1、子组件使用watch监听父组件中的props传值时，watch无法监听到数组对象的变化：
例如：
这是子组件中监听的父组件数据

// 父组件数据
let modelList = [
    {
       type: 6,
       img: 'http://cdn.zhimatech.com/daohang.png',
       title: '导航菜单',
       icon: 'http://cdn.zhimatech.com/daohang_green.png',
       color: '#0DFDF2',
       background: '#0DFDF2',
       opacity: 0.15,
       kind:1,
       activeIcon: 'http://cdn.zhimatech.com/daohang.png',
       children: [ [
        {
          img:'',
          title:'标题'
       }
     ],[] ],
   },
]

我在父组件使用类似于这种形式来改变this.modelList中的值，希望子组件监听modelList的变化（子组件使用了深度监听，deep：true，immediate：true）

// 改变父组件数据中的值
this.modelList[0] = this.data

// 子组件监听
    'modelList':{
      handler(newVal, oldVal){
        if (newVal) {
          console.log(newVal) // 根本监听不到
        }
      },
      immediate:true,
      deep: true
    }

原因：无法侦听数组及对象属性的变化
解决：

// 使用$set
this.$set(this.modelList, 0, this.data)
this.modelList[0].children.map((i,index)=>{     this.$set(this.modelList[0],index,this.data.children[index])
})

这种写法虽然看起来不是最好的解决方法，但是在我一直由于无法监听父组件的值而苦恼的时候这个方法解决了我的问题
this.$set原理参考：https://blog.csdn.net/XuM222222/article/details/99942522
问题解决参考：https://www.jb51.net/article/190991.htm（之前找到的记不得了，临时找了这个）