Vue 3使用createApp创建应用时如何调用beforeMount生命周期钩子？

错误写法原因 #

• Vue 3 的应用实例不存在 app.beforeMount() 这个API，无法直接通过应用实例挂载生命周期钩子
• 你把 app.mount('#app') 的执行顺序放在了钩子定义之前，挂载完成后再定义的钩子自然不会触发

正确实现方式 #

方式1：扩展根组件配置（和Vue 2写法最接近，无需修改原有App组件代码）

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

const app = createApp({
  // 继承原有App组件的全部配置
  ...App,
  // 定义根级beforeMount钩子
  beforeMount() {
    console.log('test')
    localStorage.setItem('something', something)
  }
})
app.use(store)
// 所有配置完成后再执行挂载
app.mount('#app')

方式2：直接在根组件App内定义钩子

如果你的根组件是普通选项式写法，直接在App.vue的导出配置中加钩子即可：

// App.vue 选项式写法
export default {
  beforeMount() {
    console.log('test')
    localStorage.setItem('something', something)
  },
  // 原有其他配置
}

如果用<script setup>组合式API写法，调用onBeforeMount钩子：

<script setup>
import { onBeforeMount } from 'vue'

onBeforeMount(() => {
  console.log('test')
  localStorage.setItem('something', something)
})
</script>

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