在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该执行了。