嘿，这个坑我踩过！你遇到的问题核心原因很简单：在data函数返回对象的时候，key属性还没完成初始化，所以this.key自然拿不到值，导致baseUrl变成了带undefined的字符串。

为什么会这样？ #

当Vue执行你的data()函数时，它会把返回的对象里的所有属性一次性初始化并挂载到Vue实例上。你写的baseUrl里直接用${this.key}，但这时候key还没被挂载到实例上（或者说还没完成赋值），所以this.key就是undefined。

最靠谱的解决方案：用计算属性（computed） #

这是最符合Vue响应式设计的做法，计算属性会自动依赖key的变化，实时更新baseUrl，而且还有缓存优化，性能更好：

export default {
  data() {
    return {
      key: "IzNDU2Nzg5MDEyMzQ1Njc"
    };
  },
  computed: {
    baseUrl() {
      // 这里的this.key已经是实例上的响应式属性了，完全可以正常获取
      return `https://example.com/api/json?key=${this.key}`;
    }
  }
}

使用的时候直接拿this.baseUrl就行，和用data里的属性一样方便，而且如果后续key的值变了，baseUrl会自动同步更新。

备选方案：把baseUrl改成方法 #

如果你的URL需要动态传参（比如除了key还有其他变量），或者不需要缓存，可以把它写成一个方法：

export default {
  data() {
    return {
      key: "IzNDU2Nzg5MDEyMzQ1Njc"
    };
  },
  methods: {
    getBaseUrl() {
      return `https://example.com/api/json?key=${this.key}`;
    }
  }
}

使用的时候调用this.getBaseUrl()即可，不过每次调用都会重新计算，没有缓存。

不推荐的方案：在created钩子初始化 #

如果你的key是固定不变的，也可以在created钩子里面给baseUrl赋值，但这种方式不是响应式的——如果后续key变了，baseUrl不会自动更新：

export default {
  data() {
    return {
      baseUrl: "",
      key: "IzNDU2Nzg5MDEyMzQ1Njc"
    };
  },
  created() {
    // 此时实例已经初始化完成，this.key可以正常获取
    this.baseUrl = `https://example.com/api/json?key=${this.key}`;
  }
}

总结一下，优先用计算属性，既符合Vue的响应式逻辑，又能自动处理属性变化的情况，是最省心的方案。

内容的提问来源于stack exchange，提问作者Osh