前端面试题

Vue 的父组件和子组件生命周期钩子执行顺序是什么？

加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
子组件更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
父组件更新过程
父beforeUpdate->父updated
销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

问题：在 Vue 中，子组件为何不可以修改父组件传递的 Prop？

原因很简单，一个父组件下不只一个子组件。
同样，使用这份 prop 数据的也不只一个子组件。
如果每个子组件都能修改 prop 的话，将会导致修改数据的源头不止一处。

所以我们需要将修改数据的源头统一为父组件，子组件想要修改 prop 只能统一交给父组件去修改，从而保证数据源唯一

3.vue 如何优化首页的加载速度？vue 首页白屏是什么问题引起的？如何解决呢？

首页白屏的原因：
单页面应用的 html 是靠 js 生成，需要将所有需要的资源都下载到浏览器端并解析

解决办法：

优化 webpack 减少模块打包体积，code-split 按需加载
服务端渲染，在服务端事先拼装好首页所需的 html
首页加 loading 或 骨架屏 （仅仅是优化体验）
使用Quicklink，在网速好的时候 可以帮助你预加载页面资源
合理使用web worker优化一些计算
缓存一定要使用，但是请注意合理使用

4.如何用 css 或 js 实现多行文本溢出省略效果，考虑兼容性？

/**单行：*/
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
/**多行：*/
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; //行数
overflow: hidden;
/** 兼容：*/
p { 
	position: relative;
	line-height: 20px;
	max-height: 40px;
	overflow: hidden;
}
p::after {
	content: "...";
	position: absolute;
	bottom: 0;
	right: 0;
	padding-left: 40px;
	background: -webkit-linear-gradient(left, transparent, #fff 55%);
	background: -o-linear-gradient(right, transparent, #fff 55%);
	background: -moz-linear-gradient(right, transparent, #fff 55%);
	background: linear-gradient(to right, transparent, #fff 55%);
}

5.ReferenceError和TypeError有什么区别？

// 指的是引用出错，比如尝试访问未定义的变量，或者提前访问无提升的变量，都会引发这个错误
console.log(foo);  // ReferenceError: foo is not defined
let foo = 1;

// TypeError 指的是类型出错。

// 众所周知JavaScript是一个弱类型的语言，这既是它的优点，也经常被人诟病。你永远也不知道 // a + b 是在做数值加减还是字符串拼接，而且似乎 a + b 几乎从来也不会报错。

// 为了规范和强调类型这一概念，避免过于模糊类型这一概念导致JavaScript对于语义的不确定性。

Symbol() + 1; // TypeError: Cannot convert a Symbol value to a number

({ toString: () =>({}) }) + 'a';  // TypeError: Cannot convert object to primitive value
// 这样使得JavaScript更为规范，当一个方法的参数需要一个 number 但却收到了一个 object，与其让它返回 NaN，不如果断地抛出 TypeError 吧

6.js中如何判断一个对象是否为空？

// 1. 可以使用 JSON.stringify() 方法判断
var obj = {}
var isEmptyObj = (JSON.stringify(obj) == "{}")
console.log(isEmptyObj) //true

// 2. for in 循环判断
let obj = {}
let isEmptyObj = function() {
	for(let key in obj) {
		return false
	}
	return true
}
console.log(isEmptyObj()) //true

// 3. 使用ES6的Object.keys()方法
// Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组。

// 如果我们的对象为空，他会返回一个空数组，如下：

let obj = {}
var emptyObj = Object.keys(obj)
console.log(emptyObj.length == 0) //true