vue中组件比main.js先运行

Question

组件 child.vue中

  mounted() {
  console.log(this.apiUrl)
  },

main.js

function getServerConfig() {
  axios.get("serverconfig.json").then(res => {
    console.log(res.data.url);
    Vue.prototype.apiUrl = res.data.url;
  });
}
async function init() {
  await getServerConfig();
  new Vue({
    render: h => h(App)
  }).$mount("#app");
}
init();

打印结果

Answer 1

function getServerConfig() {
  axios.get("serverconfig.json").then(res => {
    console.log(res.data.url);
    Vue.prototype.apiUrl = res.data.url;
    new Vue({
      render: h => h(App)
    }).$mount("#app");
  });
}
async function init() {
  await getServerConfig();
}
init();

Answer 2

建议把需要全局同步执行的操作，放到路由导航守卫中：router.beforeEach(to,form,next){},当取到你需要的值时，再执行next()进入到路由。

Answer 3

宏任务微任务了解一下。 以及js事件循环机制了解一下

Answer 4

结论: 这个执行顺序是正常的

1. axios发送请求是异步的, 也就是main.js执行到axios发送出去之后, 它就不管了 , 他会继续往下执行其他的代码; 不会等.then后才往下执行; 所以这个时候执行到了console.log(this.apiUrl) 之后某个时刻, axios返回东西了. 这个时候线程才回去执行axios里的console; 所以有了这个执行顺序;
2. 建议了解下事件循环机制; 和 异步 同步的区别;
3. 说下异步 同步吧; 假如现在js要执行10行代码, 当执行第二行的时候需要半小时才执行完; 然后再往下执行第三第四行;

异步就是它就不管3721了.先让第二行这么跑着, 接着他就去执行第三第四行去了; 这就是异步; axios就是这种; 同步就是我非得死等第二行这半小时走完才去执行第三第四行;这就是同步;

1. 你能写出这个代码 我估计也不是对同步异步不了解吧;