vue组件中为何生命周期执行顺序在其他代码后？

发现的现象

最近突然想起前段时间发现的一个现象，那就是在vue组件中生命周期执行顺序会在其他代码之后

<script>
  console.log("1");
  export default {
    created() {
      console.log("2");
    },
  }
  console.log("3");
</script>

一个再简单不过的vue组件代码。你认为他的输出顺序是什么？
答案：132

为什么？当时的我认为vue生命周期是异步的，这视乎是一个非常说的过去的解释。

那么请看下面的代码

<script>
    console.log("1");
    let vm = new Vue({
        el:"#app",
        created() {
            console.log("2");
        },
    })
    console.log("3");
</script>

同样的一个是一个vue生命周期，如果说我上面说的是正确的，那么它的答案肯定是132
答案：123

这个123的答案足以证明vue中生命周期是同步的而不是异步的。
那么为何前一段代码的执行结果是132呢？请看下面

解释

先使用node来解释

介绍一下模块化

接下来我们看一段及其复杂的node代码。如果你看不懂，建议转行

console.log("1");
function fun() {
    console.log("2");
}
console.log("3");

执行结果：13

这段代码比较复杂，就不解释了。
再来看看node的模块化

a.js

require("./b")()

b.js

console.log("1");
module.exports = function () {
    console.log("2");
}
console.log("3");

node a.js 的结果
132

是不是对最初的现象有些头绪了？
如果你还是不懂，那么我们换成js的模块化,但是这次我们导出一个对象

a.js

import b from "./b"
/*vue的一系列初始化处理后，开始按顺序执行对应的生命周期*/
b.created()

console.log("1");
export default  {
    created() {
        console.log("2");
    },
}
console.log("3");

这次我们模拟的之前的vue组件代码

结果：132

我这里没有引入vue，所有由此可见之前的现象出现的原因并不是因为vue。而是js中自带的特性。

结论

js在导入模块时和node一样，会先执行完被导入的文件（执行上下文），再导出结果

有了这句话，我们来分析一下上面这两段代码

• 代码由a.js开始执行
• 执行到导入语句，开始转到b.js执行
• • 执行输出 1
• • 执行导出语句，这是a.js中还没有获取到导出的结果，导出的内容应该是放到缓存中的
• • 执行输出 3
• • b.js执行完毕，将缓存中的导出结果赋值给a.js中的b变量
• • 调用b中的created方法，执行输出 2

接下来看我们之前的疑惑代码

console.log("1");
    let vm = new Vue({
        el:"#app",
        created() {
            console.log("2");
        },
    })
    console.log("3");

123 因为没有牵扯掉导出（模块化），一切正常执行

  console.log("1");
  export default {
    created() {
      console.log("2");
    },
  }
  console.log("3");

132 外部再使用前需要导入改组件，所以在导入时会输出1，3。使用该组件后会按序执行其中的生命周期函数，输出 3

你掌握了哪些知识

1. vue的生命周期是同步的
2. 模块化再导入之前会先执行完整个文件
3. 我们的qq群是：365399843