求助：关于 element-ui 中的 v-loading

一个很简单的功能，搜索列表内容时，发送请求获取数据，加了一个 loading 效果，展示数据的时候增加了一个 filter，但是发现，只要加了 loading，filter 就执行了两次。

我的理解为，loading 效果改变了虚拟的 dom 树，导致内容重绘，从而 filter 又执行了一次？ 这样会不会增加额外消耗？

<template>
  <div>
    <div class="search-div">
	    <el-button type="primary" @click="doSearch" :loading="searchLoading">查询</el-button>
    </div>
    <div style="height: 100px;" class="content" v-loading="searchLoading" element-loading-background="rgba(255, 255, 255, 0.7)">
      {{test | formatVal}}
    </div>
    
  </div>
</template>
<script>
export default {
  filters:{
    formatVal(val){
      console.info(`test = ${val}`, new Date().getTime());
      return val;
    },
  },
  data(){
    return {
      searchLoading: false, 
      test: 1
    };
  },
  methods: {
    //搜索
    doSearch(){
      let self = this;
      self.searchLoading = true;
      setTimeout(()=>{
	      self.test = Math.random();
	      self.searchLoading = false;
      }, 1000);
    },
  },
  // watch:{
  //   test: function(v){
	//     console.info('test changed', v);
  //   }
  // }
}
</script>