javascript - Vue.js 组件的 Created() 顺序是如何设置的？

Question

给定两个组件，它们都加载到第三个组件中，什么决定了为每个组件创建的生命周期的触发顺序？

顶级组件

<template>
   <div>
        <start-date-filter />
        <end-date-filter />
   </div>
</template>

<script>
import StartDateFilter from './StartDateFilter.vue';
import EndDateFilter from './EndDateFilter.vue';

export default {
    components: {
       StartDateFilter,
       EndDateFilter
    }
}
</script>

StartDateFilter 组件

<script>
export default {
   created() {
      console.log('made it first');
   }
}
</script>

EndDateFilter 组件

<script>
export default {
   created() {
      console.log('made it second');
   }
}
</script>

Answer 1

我不相信顺序是有保证的。这不是您真正应该依赖的东西，理想情况下，兄弟组件不应该直接相互对话，所以这无关紧要。

一般来说，当 Vue 渲染时，它会尝试重用之前渲染的子组件。各种因素影响 VNode 匹配算法以确定哪些旧节点与哪些新节点配对。已经存在的节点的任何组件都不会调用它们的 created Hook 。

仅考虑没有现有组件的全新渲染的简单情况...

您可以通过使用 debugger 语句而不只是控制台日志记录来查看当前代码如何处理此问题。在调试器中暂停时，您可以查看调用堆栈以查看组件是如何创建的。

目前看来，Vue 将按照子节点出现在 VNode 的 children 数组中的顺序处理子节点。 createChild 方法只是循环遍历它传递的子数组，该数组来自 createElm，它从 vnode.children 获取它。

我相信这应该意味着组件的 created Hook 将按照它们在模板中出现的顺序被调用，只要不涉及任何插槽。