中科曙光南京研究院前端1面

中科曙光南京研究院前端1面，2022年12月9日，会根据简历上的来问。

Angular数据脏检查

Angular是MVVM模型的框架，支持数据双向绑定。而Angular通过model操作数据data，更新view时，检查所有使用了此data的元素及指令或表达式，判断其值是否需要更新的过程，就叫做脏检查。

Angular生命周期

Angular生命周期

1. ngOnChanges: 可能不发生
   元素的输入属性变化时 @Input() ?
2. ngOnInit：
   只发生一次 获取组件数据，进行初始化时
3. ngDoCheck:
   并在发生 Angular 无法或不愿意自己检测的变化时作出反应。主动进行检查
4. ngAfterContentInit:
   第一次ngDoCheck之后调用 投影组件相关
5. ngAfterContentchecked:
   每次ngDoCheck之后调用，顺序ngAfterConnectInit之后调用
6. ngAfterViewInit:
   第一次ngAfterContentchecked， 子组图会触发
7. ngAfterViewChecked:
   每次ngAfterContentChecked,顺序ngAfterViewInit之后调用，子视图会触发
8. ngDestory:
   销毁组件或指令时进行清理，在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏

DoCheck->AfterConentChecked->AfterViewChecked
AfterContent 钩子和 AfterView 相似。关键的不同点是子组件的类型不同。
AfterView 钩子所关心的是 ViewChildren，这些子组件的元素标签会出现在该组件的模板里面。
AfterContent 钩子所关心的是 ContentChildren，这些子组件被 Angular 投影进该组件中。

首屏加载优化

首屏加载优化可以通过使用路由懒加载的方式进行提高。
路由懒加载通过需要时函数动态引入组件，而不是直接先进行加载缓存。这些动态引入的组件会在项目打包时进行分包。这样首屏加载时所需要请求的文件大小就减小了，需要的组件等路由到的时候在去请求。提高了了首屏加载的速度。

Vue生命周期

最早可以在created时期获取到数据；
beforeMount时期页面的内容是未经Vue编译绑定数据的内容，此时DOM操作并不起作用。Mounted时期模板解析渲染完毕。

1. beforeCreate->初始化数据监测,数据代理->Created
2. 解析模板,生成虚拟dom->beforeMount->将虚拟DOM转换为真实DOM显示在页面->Mounted
3. beforeUpdate->新旧虚拟DOM对比,新DOM渲染到页面->Updated
4. beforeDestroy->摧毁子组件,监听,事件监视->Destroy

nextTick

由于Vue中数据响应式更新并不会立刻重新渲染，而是会将一些DOM更新统一在一个时刻进行批量更新。如果想在数据更新后立刻获取到更新后的DOM是无法做到的。但是nextTick可以将操作包装在一个回调函数中，在下次 DOM 更新循环结束之