本人目前大三，4月末进行了人生第一场面试。不尽人意。总觉得自己什么都了解，但是又觉得什么都不会。前几天看见涡流老哥的面试文章总结。来进行一些总结吧。

涡流老哥原博文。前端两年经验，历时一个月的面经和总结

有些的不对的地方，请指正，一起总结。

框架通识

React-router、vue-router原理

其实二者的实现原理，都是基于两种模式。

hash
history 以前写过一篇文章，vue-router,里面有二者的简单实现过程。

vue和 react 的区别

前端框架用vue还是react？清晰对比两者差异

vue和 react 如何做技术选型

可以这样来说，vue就像妈妈，体贴，你想要的他都有。react就像爸爸，他更想让你自己去扩展。

css module原理

css modules并不是React特有的解决方案，而是所有使用了类似于webpack配置的环境下都可以使用的。但是，如果在其他项目中使用这个，那么我们需要自己来进行配置，比如配置webpack.config.js中的modules: true等。

通过这样就将各个元素增加独一无二的类名。

以前写过react如何处理样式

说一下虚拟DOM？为什么要使用虚拟DOM？追问：虚拟DOM是如何合并patch的

map 和 v-for 中 key 的作用

个人感觉map中的key和v-for中的key是一样的，都是为了在diff算法中新旧nodes对比标识vnodes的。

在vue中，如果不使用key,vue会使用最大限度减少动态元素，并尽最大可能的尝试修改或者复用类型相同元素的算法。

如果使用key，他会基于key的变化重新排列元素的顺序，并且移除或者销毁key不存在的元素。

react diff算法和vue diff算法的区别

【前端面试】面试官常问的虚拟dom，dom算法，key，别再答不出来了。

React 源码剖析系列－不可思议的 react diff

组件通信的方式有哪些

vue

props, 父元素为子元素传递数据。
emit, 子元素向父元素传值。
$attrs, 获取非props的属性。包括class,style。
mitt, vue官方推荐的事件总线库。这个是非父子通信。
provide, inject。为后代组件传值。
$parent, $root，$el(获取组件的根元素)。
vuex, pinia状态管理库。
获取dom元素。
作用域插槽。scopedSlot。

react

props
ref
callback function
增强组件，在中间传递一个内容。
context。
redux, react-redux。
第三方库events。

代码输出结果

EventLoop

这就涉及到浏览器的事件队列了。宏任务和微任务。

以前写过一篇文章

记住下面几点

每一个宏任务都维护了一个微任务队列。
在微任务队列中有事件的情况下，是不能执行宏任务的。
区分哪些是宏任务哪些是微任务。

setTimeout(function() {
    console.log(1);
}, 0);
new Promise(function executor(resolve) {
    console.log(2);
    for (var i = 0; i < 10000; i++) {
                    resolve();
    }
    console.log(3);
}).then(function() {
    console.log(4);
});
console.log(5);

// 2 3 5 4 1

闭包。说结果，然后分别使用Promise和async改写成每隔1s打印1个数字的形式

function print(n){
    for(var i = 0;i <n;i++){
        setTimeout(console.log, 1000, i); 
        // 我以为的： 都打印11。 打印10次
        // 结果： 0 - 9
    }
}
print(10);

const promise = new Promise((resolve, reject) => {
  console.log(1);
  resolve(5);
  console.log(2);
}).then((res) => {
  console.log(res);
})


promise.then(() => {
  console.log(3);
})


console.log(4)


setTimeout(() => {
  console.log(6)
})

// 1 2 4 5 3 6

async function async1() {
  console.log('async1 start');
  await async2();
  console.log('async1 end');
}


async function async2() {
  console.log('async2 start');
}


console.log('script start');


setTimeout(function() {
  console.log('setTimeout');
}, 0);


async1();


new Promise(function(resolve) {
  console.log('promise1');
  resolve();
}).then(function() {
  console.log('promise2');
}).then(function() {
  console.log('promise3');
});


console.log('script end');
// script start
// async1 start
// async2 start
// promise1
// script end
// async1 end
// promise2
// promise3
// setTimeout

作用域

作用域是词法作用域。根据代码定义的位置决定的。

var a = 20;


function bar() {
  console.log(a); // 20
}


function foo(fn) {
  var a = 10;
  fn();
}


foo(bar);

function bar() {
  var a = 20;
  return function() {
    console.log(a);
  }
}


var foo = bar();
var a = 10;
foo();  // 20

var a = 20;


function bar() {
  console.log(a) // undefined 。声明提升
  var a = 10;
  console.log(a) // 10
}
bar();

原型链

function foo() {

}

const bar = new foo()

console.log(bar.__proto__) // foo.prototype
console.log(bar.__proto__.__proto__) // Object.prototype
console.log(bar.__proto__.__proto__.__proto__) // null
console.log(bar.__proto__.__proto__.__proto__.__proto__) // 报错
console.log(foo.prototype)
console.log(foo.prototype.prototype)
console.log(foo.prototype.prototype.prototype)

this指向

以前总结

xdm, 加油啊。

看了涡流大佬的面试文章的总结（框架通识, 看代码说结果）