前端面试题（三）

十六，angular 钩子函数

• ngOnChanges() ：当Angular设置数据绑定输入属性时响应。该方法接受当前和上一属性值的SimpleChanges 对象。 在ngOnInit（）之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。
• ngOnInit（）：在Angular第一次显示数据绑定和设置指令/组件的输入属性之后， 初始化指令/组件。在第一轮ngOnChanges（）完成之后调用，只调用一次。
• ngDoCheck（） 检测， 并在发生Angular无法或者不愿意自己检测的变化时作出反应。 在每个变更检测周期中， 紧跟在ngOnChanges（）和ngOnInit（）后面调用。
• ngAfterContentInit（） 当Angular 把外部内容投影进组件/指令的视图之后调用。第一次ngDoCheck（）之后调用，只调用一次。
• ngAfterContentChecked（）每当Angular完成被投影组件内容的变更监测之后调用。ngAfterContentInit（） 和每次ngDoCheck（）之后调用。
• ngAfterViewInit（） 当Angular初始化完组件视图及其子视图之后调用。第一次那个AfterContentChecked（）之后调用， 只调用一次。
• ngAfterViewChecked（） 每当Angular 做完组件视图和子视图的变更监测之后调用。 ngAfterViewInit（） 和每次 ngAfterContentChecked（）之后调用。
• ngOnDestroy（） 每当Angular 每次销毁指令/组件之前调用并清扫。 在这反订阅可观察对象和分离事件处理器， 以防内存泄漏。 在Angular 销毁指令/组件之前调用。

十七，封装公共组件

1. Angular 自定义公共组件： 需要考虑 （1）功能的整体性是否适合封装成一个组件 （2）对于数据绑定的分析要全面；

        

// 定义子组件

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'app-child',
    template: ` <button (click)="btnClick()"> {{inputData}} </button>`
})
export class ChildComponent implements OnInit {
    // @Input 接收数据
    
    @Input() inputData: any;

    // 向父组件传递数据
    @Output() emitData: EventEmitter<any> = new EventEmitter()

    btnClick() {
        this.emitData.emit('xxxx');
    }
}

// 定义父组件

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-'parent',
    template: ` <app-child [inputData]="data" (emitData)="btnEvent($event)"> </app-child> `
})
export class ParentComponent implements OnInit {
     
    data = '提交';
    // modelData: any;

    btnEvent(event) {
        console.log(event); // xxx
    }
}

1. Vue 自定义公共组件：

十八，反转数组

• reverse 方法， 但是同时也会修改原数组；
• spread运算符， [...arr].reverse(); // 不会修改原数组 arr
• slice方法， arr.slice().reverse(); 不会修改原数组