中科曙光南京研究院前端1面，2022年12月9日，会根据简历上的来问。
Angular数据脏检查
Angular是MVVM模型的框架，支持数据双向绑定。而Angular通过model操作数据data，更新view时，检查所有使用了此data的元素及指令或表达式，判断其值是否需要更新的过程，就叫做脏检查。
Angular生命周期
- ngOnChanges: 可能不发生
元素的输入属性变化时 @Input() ? - ngOnInit：
只发生一次 获取组件数据，进行初始化时 - ngDoCheck:
并在发生 Angular 无法或不愿意自己检测的变化时作出反应。主动进行检查 - ngAfterContentInit:
第一次ngDoCheck之后调用 投影组件相关 - ngAfterContentchecked:
每次ngDoCheck之后调用，顺序ngAfterConnectInit之后调用 - ngAfterViewInit:
第一次ngAfterContentchecked， 子组图会触发 - ngAfterViewChecked:
每次ngAfterContentChecked,顺序ngAfterViewInit之后调用，子视图会触发 - ngDestory:
销毁组件或指令时进行清理，在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏
DoCheck->AfterConentChecked->AfterViewChecked
AfterContent 钩子和 AfterView 相似。关键的不同点是子组件的类型不同。
AfterView 钩子所关心的是 ViewChildren，这些子组件的元素标签会出现在该组件的模板里面。
AfterContent 钩子所关心的是 ContentChildren，这些子组件被 Angular 投影进该组件中。
首屏加载优化
首屏加载优化可以通过使用路由懒加载的方式进行提高。
路由懒加载通过需要时函数动态引入组件，而不是直接先进行加载缓存。这些动态引入的组件会在项目打包时进行分包。这样首屏加载时所需要请求的文件大小就减小了，需要的组件等路由到的时候在去请求。提高了了首屏加载的速度。
Vue生命周期
最早可以在created时期获取到数据；
beforeMount时期页面的内容是未经Vue编译绑定数据的内容，此时DOM操作并不起作用。Mounted时期模板解析渲染完毕。
- beforeCreate->初始化数据监测,数据代理->Created
- 解析模板,生成虚拟dom->beforeMount->将虚拟DOM转换为真实DOM显示在页面->Mounted
- beforeUpdate->新旧虚拟DOM对比,新DOM渲染到页面->Updated
- beforeDestroy->摧毁子组件,监听,事件监视->Destroy
nextTick
由于Vue中数据响应式更新并不会立刻重新渲染，而是会将一些DOM更新统一在一个时刻进行批量更新。如果想在数据更新后立刻获取到更新后的DOM是无法做到的。但是nextTick可以将操作包装在一个回调函数中，在下次 DOM 更新循环结束之后执行延迟回调。在修改DOM数据之后立即使用这个方法，获取更新后的 DOM。
父子组件生命周期
初始化：
update：
若父子组件间有数据传递，则update过程为，父beforeUpdate->子beforeUpdate->子updated->父updated。否则没有数据传递交互的话，各自执行beforeUpdate和updated。
destroy：
JavaScript
ES6
ES6新特性
其中数据解构是浅拷贝。
箭头函数
箭头函数与其他函数的区别
最主要就是没有自己的this，箭头函数的this指向在定义（注意：是定义时，不是调用时）的时候继承自外层第一个普通函数的this。所以，箭头函数中 this 的指向在它被定义的时候就已经确定了，之后永远不会改变。
没有自己this，所以不能new 作为构造函数；不能使用call，apply，bind等改变指向。
此外函数内没有arguments对象，可以用…rest数据解构获取参数们；不能用作Generator函数，不能使用yield关键字。
CSS
可继承属性
- 字体系列属性：font-family，font-size
- 文本系列属性：text-indent，line-height，color
line-height：子元素未指定设置具体行高数值时
具体数值：若父元素line-height为具体数值，会自动继承父元素的行高；
按比例：父元素行高为1.5或2等倍数，则子元素行高继承倍数，同时会乘以子元素font-size计算具体子元素行高。
<style>
body {
font-size: 20px;
line-height: 1.5
}
p {
font-size: 16px;
color: #fff;
background-color: #000;
}
</style>
<body>
<!--p元素的行高为 24px, 即 1.5*16-->
<p>我是行高</p>
</body>
百分比：子元素不会直接继承父元素行高，而是等父元素字体大小*行高百分比后在继承
<style>
body {
font-size: 20px;
line-height: 200%
}
p {
font-size: 16px;
color: #fff;
background-color: #000;
}
</style>
</head>
<body>
<!-- 此时p的行高为20px = 20px*200% -->
<p>我是行高</p>
</body>
- 元素可见性：visibility
- 表格布局属性：border-style
- 列表布局属性：list-style list-style-type
- 光标属性：cursor
不可继承属性
- 宽高:height，width
- 最小最大宽高：max-height,min-height，max-width，min-width
- dispaly属性
- 文本阴影：text-shadow
- 背景属性：background
- 浮动属性：float
- 生成内容：content
- 层级属性：z-index
- 定位属性：position，left，right，top，bottom
- 盒模型属性：margin,padding,border
那些继承，字体，文字，linge-height继承方式
预处理器less
Less预处理器
变量：
使用@name：value进行声明，使用时@name进行访问。
嵌套：
Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。
用 Less 书写的代码更加简洁，并且模仿了 HTML 的组织结构。
混合：
允许定义一个样式表，然后在其他地方类似函数的方式进行调用。
混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。假设我们定义了一个类（class）如下：
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
如果我们希望在其它规则集中使用这些属性呢？没问题，我们只需像下面这样输入所需属性的类（class）名称即可，如下所示：
#menu a {
color: #111;
.bordered();
}
.post a {
color: red;
.bordered();
}
扫一扫
155
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
