Javascript》》JS》》Import执行的时机 和 Vue父子组件生命周期执行顺序是什么？

CommonJS、AMDJS

import 导入 css文件、js文件

@的用法

// 导入全局 CSS
import '@/styles/global.css'

// 导入 SCSS/SASS
import '@/styles/variables.scss'

// 导入 CSS 模块 (作用域 CSS)
import styles from '@/styles/module.module.css'

// 导入默认导出
import myModule from '@/utils/myModule.js'

// 导入命名导出
import { namedExport } from '@/utils/helpers.js'

// 导入全部并命名为一个对象
import * as utils from '@/utils/allUtils.js'

1. ES Modules (ESM) 的 import 执行时机

//文件  a.js
console.log('a');
import { b } from './b.js';

//文件  b.js
console.log('b');
import { c } from './c.js';

//文件  c.js
console.log('c');

// 输出顺序：c → b → a

Vue父子组件生命周期执行顺序

执行顺序：父组件先创建，然后子组件创建；子组件先挂载，然后父组件挂载，即“父beforeCreate-> 父create -> 子beforeCreate-> 子created -> 子mounted -> 父mounted”。

在单一组件中，钩子的执行顺序是beforeCreate-> created -> beforemount->mounted->beforeDestory->destroyed
beforeUpdate——>updated

加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed