vue 对data数据的深度监听（多层嵌套数据）

watch和computed配合使用

需要监听好几层数据里面的内容，比如this.envArr[index].hearder[index].value 只用watch是没办法监听到的，会报错。所以需要watch和computed搭配使用。

watch: {
    // 用来监听鉴权headers,清空cookie的时候让select也为空
    headers(value){
    },
  },
  computed:{
    // 用来监听鉴权headers,清空cookie的时候让select也为空
    headers(){
      if(this.envsArr){
        this.envsArr.forEach((item,index)=>{
          if(item.headers.length>1){
            item.headers.forEach(element=>{
              if(element.value == ""){
                element.name = ""
              }
              return  element.value;
            })
          }else{
            if(item.headers[0].value == ""){
              item.headers[0].name = ""
            }
            return item.headers[0].value;
          }
        })
      }
    }
  },

深度监听

如果是监听第二层数据 watch:{} 对象，可监听数据，数据发生变化， 处理函数 watch虽可监听，但只是浅监听，只监听数据第一层或者第二层， 何为第二层？ let obj = {name: 'xx', child: {age: 11}}; child之后的值就为第二层或者深层,要拿到深层的数据就需要使用深度监听 这个时候可以用hander(){},deep:true

watch: {
   ' user.phone ' : {
       handler:function() {   //特别注意，不能用箭头函数，箭头函数，this指向全局
           处理函数
       },
       deep: true    //深度监听
   }