所谓的代理者是指一个类别可以作为其它东西的接口。代理者可以作任何东西的接口：网上连接、存储器中的大对象、文件或其它昂贵或无法复制的资源。

情景

我们从后端拿到了一堆数据

  • 数据不为空——进行列表显示

  • 数据为空——显示数据为空的提示

    1. // list.vue
    2. <template>
    3. <div>
    4. <div v-if="isEmpty">数据为空</div>
    5. <div v-else>
    6.   <div v-for="item in data">
    7.     ... do something  
    8. </div>
    9. </div>
    10. </div>
    11. </tempalte>
    12. <script>
    13. export default{
    14.   props: {
    15.     data: Array
    16.   },
    17.   computed: {
    18.     isEmpty() {
    19.       return this.data.length < 1
    20.     }
    21.   }
    22. }
    23. </script>

    可以发现List组件做了两件事：数据为空的处理、数据不为空的处理，这种设计是不太友好的

    Proxy

    // ProxyList.vue
<template>
<div>
<empty v-if="isEmpty" />
<list v-else :data="data" />
</div>
</tempalte>
<script>
import Empty from './Empty'
import List from './List'

export default{
  props: {
    data: Array
  },
  computed: {
    isEmpty() {
      return this.data.length < 1
    }
  },
  components:{
    Empty,
    List
  }
}
</script>

    对于数据data的使用者来说，只需关心拿数据渲染列表，数据为空是什么样的完全不关心