vue实现优化 getUserInfo 这个方法， 保证 getUserInfo 方法3次调用后， 最终只会发出一次网络请求。

你可以使用 Vue 的计算属性 (computed) 来实现这个优化。计算属性会在依赖的数据发生改变时自动重新计算，而且计算结果会被缓存起来，只有当依赖的数据发生改变时才会重新计算。

你可以将 `getUserInfo()` 方法的返回值作为计算属性的值，并将请求结果缓存起来。每次计算属性被调用时，先检查缓存中是否有请求结果，如果有则直接返回缓存中的结果，否则再发起网络请求。

以下是一个示例代码：

<template>
  <div>
    <p>{{ userInfo }}</p>
    <button @click="getUserInfo">Get User Info</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cache: null, // 缓存请求结果
      counter: 0 // 调用计数器
    }
  },
  computed: {
    userInfo() {
      if (this.cache) {
        return this.cache
      } else if (this.counter >= 3) {
        this.counter = 0
        this.$http.get('/api/userInfo').then(response => {
          this.cache = response.data
        })
      }
    }
  },
  methods: {
    getUserInfo() {
      this.counter++
    }
  }
}
</script>

在上面的代码中，我们使用 `counter` 变量来记录 `getUserInfo()` 方法被调用的次数。当 `counter` 的值大于等于 3 时，表示已经调用了 3 次 `getUserInfo()` 方法，这时我们发起网络请求获取用户信息，并将结果缓存起来。在计算属性中，我们首先检查缓存中是否有请求结果，如果有则直接返回缓存中的结果，否则再发起网络请求。

这样就可以保证 `getUserInfo()` 方法最多只会被调用 3 次，而网络请求最多只会发送一次。