创建了全局 vue 实例的 Lifecycle Hook

Question

我希望能够在我的 vue 项目中全局使用 AOS 库。

这是针对 Vue 2 的。

new Vue({
  created () {
    AOS.init()
  },
  render: h => h(App),
}).$mount('#app');

Vue 3 对应用程序的设置略有不同。

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

我在 Vue 3 设置中没有那个 created 选项。我试过了，但这更像是一个猜谜游戏...

createApp({App, AOS.init()})

但是我可以在 Vue 3 中使用它吗？

Answer 1

您可以使用根组件的 created 钩子。对我来说，这似乎一直是初始化应用程序范围的库的合适位置。

Answer 2

您仍然可以在 Vue 3 中执行此操作。注意 h() 现在作为全局函数从 vue 导入，而不是作为 render().

的参数

这是等效的 Vue 3 代码：

import { createApp, h } from 'vue'
import App from './App.vue'

createApp({
  created() {
    AOS.init()
  },
  render: () => h(App),
}).mount('#app')

创建了全局 vue 实例的 Lifecycle Hook

Created Lifecycle Hook of global vue instance

lifecycle

vue.js

vuejs2

vuejs3