vue中watch深度监听

背景：使用store中存的值来控制子页面的显示;

1.父页面代码（父页面有以下几个子页面需要控制展示）：

<el-col :span="19" v-show="activeIndex==2">
            <service :bCompany="bCompany" :serviceList="serviceList" :key="bCompany.bcid"></service>
          </el-col>
          <el-col :span="19" v-show="activeIndex==3">
            <example :bCompany="bCompany" :caseList="caseList" :key="bCompany.bcid"></example>
          </el-col>
          <el-col :span="19" v-show="activeIndex==8">
            <service-details :bCompany="bCompany"></service-details>
          </el-col>
          <el-col :span="19" v-show="activeIndex==9">
            <example-details :bCompany="bCompany"  :caseList="caseList" :key="bCompany.bcid"></example-details>
          </el-col>

2.现在需求是要从子页面example列表跳转到子页面example-details详情页面并且带值，跳转成功之后详情子页面要执行axios查询方法。两个子页面使用store进行传参。

example页面代码：点击todetail方法的时候展示详情子页面

<el-row :gutter="30" class="content"  v-if="caseList.length>0">
      <el-col :span="8" v-for="(item,index) of caseList" :key="index">
        <el-card shadow="none">
          <el-image style="width: 100%; height: 240px" :src="circleUrl+item.caseLogoPath" fit="fill"></el-image>
          <div class="infomation"><b style="display: inline-block; margin-top: 15px;cursor: pointer;" @click="todetail(item)">{{item.caseTitle}}</b></div>
        </el-card>
      </el-col>
    </el-row>

todetail(item){
        this.$store.commit("website/RECORD_activeIndex",'9')
        this.$store.commit("website/RECORD_isdetail2",true)
        this.$store.commit("website/RECORD_isdetail6",item)
      },

下面看一下isdetail6在store中的定义：（isdetail6:{}）object类型

const state = {
  //导航
  activeIndex: "1",
  // 工坊服务详情
  isdetail: false,
  isdetail2: false,
  isdetail3:{},
  isdetail4:{},
  isdetail5:{},
  isdetail6:{},
}

const mutations = {
  RECORD_activeIndex: (state, activeIndex) => {
    state.activeIndex = activeIndex
  },
  RECORD_isdetail: (state, isdetail) => {
    state.isdetail = isdetail
  },
  RECORD_isdetail2: (state, isdetail2) => {
    state.isdetail2 = isdetail2
  },
  RECORD_isdetail3: (state, isdetail3) => {
    state.isdetail3 = isdetail3
  },
  RECORD_isdetail4: (state, isdetail4) => {
    state.isdetail4 = isdetail4
  },
  RECORD_isdetail5: (state, isdetail5) => {
    state.isdetail5 = isdetail5
  },
  RECORD_isdetail6: (state, isdetail6) => {
    state.isdetail6 = isdetail6
  },
}

const actions = {
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

注意：要中声明，不然得不到值：（代码如下）

const getters = {
  hasLoginbg: state => state.login.hasLoginbg,
  stepnum: state => state.login.stepnum,
  stepCom: state => state.login.stepCom,
  comloginsteps: state => state.login.comloginsteps,
  comCertisteps: state => state.login.comCertisteps,
  personalpoststep: state => state.login.personalpoststep,
  activeIndex: state => state.website.activeIndex,
  isdetail: state => state.website.isdetail,
  isdetail2: state => state.website.isdetail2,
  isdetail3: state => state.website.isdetail3,
  isdetail4: state => state.website.isdetail4,
  isdetail5: state => state.website.isdetail5,
  isdetail6: state => state.website.isdetail6
}
export default getters

 接下来看一下详情子页面：

注意：下边代码是有问题的；首先接store中的值,然后执行mounted中的querycertificate方法；

问题就是子页面mounted在父页面刷新的时候就已经执行了，这个时候并不会再次执行，父页面并没有给isdetail6赋值。所以this.isdetail6.zwcId在这里没有值，这个方法也就失去了作用。

computed: {
    ...mapGetters(['isdetail2','isdetail6'])
},
mounted() {
    this.querycertificate()
},
methods: {
    querycertificate(){
        //查询工坊案例图片
                    this.$api.uploadfile.querySysUploadfileListByType('keyId='+this.isdetail6.zwcId+'&docType=05').then((res) => {
                      if (res.code == "0000") {
                        this.urls = res.data
                      } else {
                        this.$message({message: '错误原因：' + res.msg, type: 'error'})
                    }
          }).catch((res) => {
            this.$message({message: res.msg, type: 'error'});
        });
    }
}

问题已找出，这个时候就需要用到watch监听一下这个isdetail6变化的时候在执行查询方法。

watch: {
    isdetail6(newName, oldName) {
      this.querycertificate(newName)
    }
  } 

deep

然而这样却报一个错误说类型不对；查询资料得知watch里面还有一个属性 deep，默认值是 false，代表是否深度监听，然后修改如下：

watch: {
    // 深度 watcher
    isdetail6: {
      handler: function (val, oldVal) {
          this.querycertificate(val.zwsId)
      },
      deep: true
    }
  }

deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。

优化，我们可以是使用字符串形式监听。代码如下：

watch: {
    // 深度 watcher
    'isdetail6.zwcId': {
      handler: function (val, oldVal) {
          this.querycertificate(val)
      },
      immediate: true
    }
  }

好了，这样就解决了现存问题，如果帮助到您请给个三连，谢谢。