框架通识
React-router、vue-router原理
其实二者的实现原理，都是基于两种模式。
- hash
- history以前写过一篇文章，vue-router,里面有二者的简单实现过程。
vue和 react 的区别
vue和 react 如何做技术选型
可以这样来说，vue就像妈妈，体贴，你想要的他都有。react就像爸爸，他更想让你自己去扩展。
css module原理
css modules并不是React特有的解决方案，而是所有使用了类似于webpack配置的环境下都可以使用的。但是，如果在其他项目中使用这个，那么我们需要自己来进行配置，比如配置webpack.config.js中的modules: true等。
通过这样就将各个元素增加独一无二的类名。
说一下虚拟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)
