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

【问题标题】：How is Vue.js component Created() order set?Vue.js 组件 Created() 顺序是如何设置的？
【发布时间】：2020-01-02 04:54:35
【问题描述】：

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

顶级组件

<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>

【问题讨论】：

标签： javascript vue.js vue-component

【解决方案1】：

我不相信订购是有保证的。这不是您真正应该依赖的东西，理想情况下，兄弟组件不应该直接相互交谈，所以这不重要。

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

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

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

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

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

【讨论】：

在这种情况下，模板中是否出现该订单至少定义了订单。