在vue中为什么可以通过computed属性作为中间件,去监听对象属性的变化

Question

<template>  <div>    <!-- el实现 -->    <el-form>      <el-form-item label="相关人员">        <el-select class="filter-item" multiple v-model="forms.teamuser" placeholder="请选择相关人员" style="width: 100%;">          <el-option v-for="(item,index) in forms.messageuser" :key='index' :label='item' :value='index'>          </el-option>        </el-select>      </el-form-item>    </el-form>  </div></template><script>  export default{    data(){      return{       forms:{         teamuser:'区域1',         messageuser:['区域1','区域2','区域3']       },     }    },    //深度监听对象属性变化    computed:{      teamuser(){        console.log(this.forms.teamuser)        return this.forms.teamuser              }    },    watch:{      teamuser(){        console.log('watch方法执行了'+this.forms.teamuser)              }    }  }</script>如上代码,为什么computed属性可以作为watch的中间件,从而实现可以监听对象forms的teamuser属性

Answer 1

data的时候，对其中的每个存在的值会进行深度遍历，创建dep。
computed的时候会分析其中的值，然后把computed添加到了依赖值的dep通知队列里。
这样每次this.forms.teamuser变的时候就会通知teamuser该执行了。