vue3 全局 mixin mounted 在 组件 Composition setup onMounted 钩子后执行

[Hubmeat]

Link to minimal reproduction

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiIiwiaW1wb3J0LW1hcC5qc29uIjoie1xuICBcImltcG9ydHNcIjoge1xuICAgIFwidnVlXCI6IFwiaHR0cHM6Ly9zZmMudnVlanMub3JnL3Z1ZS5ydW50aW1lLmVzbS1icm93c2VyLmpzXCJcbiAgfVxufSIsIkNvbXAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiwgb25Nb3VudGVkIH0gZnJvbSAndnVlJ1xub25Nb3VudGVkKCgpID0+IHtcblx0Y29uc29sZS5sb2coJ+e7hOS7tiBtb3VudGVkJylcbn0pXG5jb25zdCBtc2cgPSByZWYoJ0hlbGxvIFdvcmxkIScpXG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuICA8aDE+e3sgbXNnIH19PC9oMT5cbjwvdGVtcGxhdGU+In0=

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

[liulinboyi]

全局 Mixin生命周期和在组件中以组合式 API的方式使用生命周期，生命周期顺序确实会错误。

使用全局 Mixin生命周期时，在组件中以Options API的方式使用生命周期，顺序是正确的的，建议这样用。

建议Options API和组合式 API不要混用。

具体这个问题怎么解决，需要看官方。

怎样使用好组合式 API，可以看naive-ui。

[liulinboyi]

变通的写法可能是这个

<script setup>
import { onMounted, nextTick } from "vue"

onMounted(
  nextTick(() => {
    console.log("setup onMounted 组件 mounted")
  }))
</script>

[Hubmeat]

嗯..明白这个特点，但我们的组件库统一使用 Composition api 进行编写，现在需要对所有 vue 实例在 mounted 阶段 hack 或植入一些代码，但植入代码的顺序需要在组件 mounted 以前，为了不影响组件本身的代码，从官方文档的角度出发，mixin 的设计是一个比较好的方式...如果全局 mixin 在设计上无法与 options api 保持一直，那后续官方文档上标记下吧

[liulinboyi]

嗯..明白这个特点，但我们的组件库统一使用 Composition api 进行编写，现在需要对所有 vue 实例在 mounted 阶段 hack 或植入一些代码，但植入代码的顺序需要在组件 mounted 以前，为了不影响组件本身的代码，从官方文档的角度出发，mixin 的设计是一个比较好的方式...如果全局 mixin 在设计上无法与 options api 保持一直，那后续官方文档上标记下吧

理解。

[posva]

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.