Subscribe on changes!

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

avatar
May 14th 2022

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

avatar
May 15th 2022

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

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

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

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

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

avatar
May 15th 2022

变通的写法可能是这个

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

onMounted(
  nextTick(() => {
    console.log("setup onMounted 组件 mounted")
  }))
</script>
avatar
May 16th 2022

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

avatar
May 16th 2022

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

理解。

avatar
Aug 31st 2022

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.