Vue.js 和不同环境下的渲染调度

问：

我有兴趣了解特定环境/实现是否以及为什么会产生这种类型的竞争条件。在研究了这些案例后，我选择了如下所示的实现：

• 什么是nextTick，它在Vue.js中有什么作用？
• 为什么 setTimeout（fn， 0） 有时很有用？

我的方案

我正在出现的 Vue 组件上创建一个复杂的过渡。基本思想是等待组件挂载，然后通过 .这样，浏览器将有机会在应用任何新样式之前使用默认样式呈现元素。onMountedsetTimeout

<script setup>

// ...

onMounted(() => {
    setTimeout(() => {
        // All style manipulation logic
    }, 0);
});

</script>

这是一个暴露情况的DEMO（逻辑完全在里面）。Comp.vue

这在我的本地环境中有效，但是它在 Vue SFC Playground 中具有意外行为（页面加载时不会发生动画）。因此，我担心这种类型的方法与运行时环境紧密绑定，并严重影响组件的可重用性。

转换？

Vue 使用一个内置组件 ，以可预测的方式管理与组件外观相关的效果。但是，就我而言，我希望对我的组件采取更必要的方法，而这不仅限于外观。下面是一个示例：Transition

// Inside myComp's parent
onMounted(() => {
  myComp.doSomething();
});

这里的问题是父级无法知道渲染或过渡是否已经发生

我想到的最优雅的解决方案是公开一个内部，这是通过出现的组件上的钩子来解决的。然后是父钩子的内部 -- 这有意义吗？有一些缺点吗？PromisemyCompTransitionawaitPromiseonMounted