vue中, export default 外的代码拥有什么样的生命周期?

Question

console.log('outter1');
export default {
    data(){
        return {}
    };
    beforeCreated(){console.log('bc')},
    beforeDestory(){console.log('bd')}
}
console.log('outter2')

得到的输出是这样的:

同时发现, 当我路由到其他组件后, 再路由回来时, export default 外的两个console就不会再执行了.
那么, export default 外的这些代码在vue中拥有什么样的生命周期, 在这一块里定义的变量的scope又是什么呢?

Answer 1

以下以webpack打包.vue file为例，并且相对应提到的库或loader名称可能有版本间出入，理解核心即可。

vue-loader 把.vue 文件的拆分为多个部分各自独立编译处理，
拆分 template 交给vue的模版编译器，例如 @vue/component-compiler-utils
拆分 script 交给babel，例如 babel-loader
拆分 style 交给对应的预处理器，例如 less-loader
还有自定义custom-block，用的少，不举例。

问题问js，那就说这一块

console.log('outter1');
export default {
    data(){
        return {}
    };
    beforeCreated(){console.log('bc')},
    beforeDestory(){console.log('bd')}
}
console.log('outter2')

它最终会被编译为这个样子

/* 124 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
//
//

console.log('outter1');
/* harmony default export */ __webpack_exports__["default"] = ({
  data: function data() {
    return {};
  },
  beforeCreated: function beforeCreated() {
    console.log('bc');
  },
  beforeDestory: function beforeDestory() {
    console.log('bd');
  }
});
console.log('outter2');

/***/ })

至此，这个vue文件中的script模块，变成了一个webpack的模块。
它默默的等待webpack内部处理有朝一日将它引入，引入的方式即为执行这个模块函数.
突有一日，狂风大作，上天传来了对它的召唤

import TestVue from "../../test.vue"

此时，函数被调用，

console.log('outter1');//执行
// 主体部分被__webpack_exports__ 作为引用导出
console.log('outter2'); //执行

即解释了export default 外的这些代码在vue中拥有什么样的生命周期

为什么再路由回来时, export default 外的两个console就不会再执行了
因为webpack内部对于模块的引入有缓存，他不会再次执行这个模块函数了，这可能就是渣男吧，已经得到了它的心 就不会再投入心力了。

在这一块里定义的变量的scope又是什么呢
这个应该也不用解释了

Answer 2

就是普通的js文件执行顺序，按照文件加载顺序执行。并不存在什么生命周期，因为这部分内容没有交由 vue 管理。

Answer 3

export出去的对象是单例的。

这和vue没有关系，是esm的模块规范。模块只会加载一次，如果import时还没有加载则执行该js，并得到这个模块export出去的值，之后import则直接取之前得到的该模块export出去的值。