Question

在我的主要App.vue中，我有：

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
  mixins: [logoutMixin],
  beforeCreate() {
    console.log('do initialization stuff')
  }
};
</script>

在另一个Settings.vue中，我有：

export default {
  name: "Settings",
  data() {
    console.log(this.$User);
    return {
      User: this.$User
    };
  },
  mounted() {
    console.log("Mounted");
  }
};

以某种方式data在App的{{1}}之前运行。我可以在顶层执行初始化代码吗？

Answer 1

对于Vue Parent and Child lifecycle，它将执行代码Parent's created() => Child's created() => Child mounted() => Parent mounted()。

在您的情况下，App.vue是父组件，Settings.vue是子组件。因此，您可以在beforeCreate()组件的create()或App.vue钩子中初始化数据。但是请不要在return {}部分的data()之前放置任何代码。由于Vue无法保证Vue lifecycle之外的执行顺序。

Answer 2

您可以在挂载主要组件之前在main.js/ts文件中执行此操作：

doInitializationStuff()

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

在异步初始化的情况下（请注意，不要将其用于长时间异步函数）：

doInitializationStuff().then(() => {
 new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount('#app')
})

在安装组件之前，如何使用vue.js运行一些初始化代码？

2 个答案: