记一次项目中某个值是undefined的分析

入职新公司，用的 vue2 框架。帮同事改一个 bug ，某个值明明定义了，但是值取不到。 以下面代码为例

...
data(){
  return {
    baseUrl: window.config.url
  }
},
mounted(){
  this.getUrl()
},
methods: {
  getUrl(){
    console.log(this.baseUrl, window.config.url) // undefined  "/xxx"
  }
}
...

从代码上看，应该是赋值时机问题，然后去看看项目什么时候引入的 window.config.url ，然后发现这个定义 window 的文件与 index.html 同级并且被当作脚本引入，如下图

这下恍然大悟，脚本的加载是异步的，而 data 中赋值是组件实例化的时候， vue 挂载是同步的，所以取 this.baseUrl 的时候是 undefined，而 window.config.url 又有值