vue3 全局 mixin mounted 在 组件 Composition setup onMounted 钩子后执行
Link to minimal reproduction
Steps to reproduce
- 首先创建一个 vue 实例:const app = createApp({ ... })
- 注册一个自定义组件: app.component('test-component', { ...setup() { mounted() { console.log(’组件 mounted‘) } })
- 注册一个全局 mixin app.mixin({ mounted() { console.log(’全局 mounted‘) }})
What is expected?
- 期望全局 mixin mounted 先走,输出 「’全局 mounted‘」
- 再输出 test-component 的 「’组件 mounted‘」
What is actually happening?
- 自定义组件 setup 函数中的 onMounted 信息先打印
- 全局 mixin mounted 后打印
System Info
no
Any additional comments?
no
全局 Mixin生命周期和在组件中以组合式 API
的方式使用生命周期,生命周期顺序确实会错误。
使用全局 Mixin生命周期时,在组件中以Options API
的方式使用生命周期,顺序是正确的的,建议这样用。
建议Options API
和组合式 API
不要混用。
具体这个问题怎么解决,需要看官方。
怎样使用好组合式 API
,可以看naive-ui。
变通的写法可能是这个
<script setup>
import { onMounted, nextTick } from "vue"
onMounted(
nextTick(() => {
console.log("setup onMounted 组件 mounted")
}))
</script>
嗯..明白这个特点,但我们的组件库统一使用 Composition api 进行编写,现在需要对所有 vue 实例在 mounted 阶段 hack 或植入一些代码,但植入代码的顺序需要在组件 mounted 以前,为了不影响组件本身的代码,从官方文档的角度出发,mixin 的设计是一个比较好的方式...如果全局 mixin 在设计上无法与 options api 保持一直,那后续官方文档上标记下吧
嗯..明白这个特点,但我们的组件库统一使用 Composition api 进行编写,现在需要对所有 vue 实例在 mounted 阶段 hack 或植入一些代码,但植入代码的顺序需要在组件 mounted 以前,为了不影响组件本身的代码,从官方文档的角度出发,mixin 的设计是一个比较好的方式...如果全局 mixin 在设计上无法与 options api 保持一直,那后续官方文档上标记下吧
理解。
Hello, make sure to always provide a reproduction that follows the instructions at https://new-issue.vuejs.org/?repo=vuejs/vue-next#why-repro.
Open a new issue with a reproduction that follows those instructions if you manage to create a boiled down reproduction.