前端面试框架

[dravenww]

vue

vue基本

一、 vue的生命周期： beforeCreate、created、beforeMounte、mounted、beforeUpdate、updated、beforeDestory、destroyed；

二、 Vue组件通信：

• props(emit)；
• $attr和$listeners，
• 事件bus对象(bus.$on, bus.$emit)，
• provide(inject)，
• v-model(props:value, emit:input )，
• $children，
• vuex

三、keep-alive使用及原理，LRU算法

四、vue的v-show和v-if的区别；vue的watch和computed的区别；

五、其他：vue的服务端渲染，例如框架nuxt的使用；前端组件库的使用，如element-ui；

vue2与vue3

3是Proxy+Reflect，2是Object.defineProperty；dom-diff的优化；componentApi等

vue-router

• 实现的模式：hash & history；两者的区别和分析
• 事件：全局：beforeEach、afterEach；路由：beforeEnter；组件内：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
• 实现原理，源码

vuex

• vuex是什么？vuex官网
• state、getters、mutations(commit)、actions(dispatch)、module
• mapState、mapMutations、mapGetters、mapActions；subscribe，subscribeAction
• 实现原理，源码等

react

一、生命周期

  1.react16之前的生命周期是什么？
  2.react16之后的生命周期是什么？
  3.react16和react16之前的版本有什么区别？
  4.requestAnimationFrame是什么？requestIdleCallback是什么？如何实现requestAnimationFrame

// 实现requestAnimationFrame
var lastTime = 0
window.requestAnimationFrame = function (callback) {
    let now = Date().now;
    let timeCall = Math.max(0, 16 - (lastTime - now));

    let id = setTimeout(function () {
        callback(now + timeCall)
    }, timeCall)
    
    lastTime = now + timeCall;
    return id;
}

二、react-hooks

1.常用的reacthooks都有哪些？
2.使用useEffect模拟componentDidMount和componentDidUpdate
3.useEffect返回的是什么？做什么用的？
4.useEffect和useLayoutEffect的区别是什么？
5、useMemo和useCallback是什么？做什么用的？有什么区别？

三、react-router

1.如何实现路由切换，有几种方式？
2.有哪几个钩子函数？onEnter和routerWillLeave
3.link与a标签的区别什么？

四、redux

1.redux是什么？做什么的？与vuex有什么区别？
2.redux包含哪几块？state，reducers，actions

五、其他：

1.服务端渲染next；
2.组件库antd；
3.PureComponent与Component的区别是什么？
4.react的性能优化有什么建议？
5.封装一个promise的setState

// 使用promise封装setState
function setStateP(state) {
    return new Promise(resolve => {
        this.setState(state, resolve)
    })
}

工具型-webpack

• 1.webpack是什么？
• 2.webpack的工作原理是什么？
• 3.写过plugin吗？怎么实现的？
• 4.loader是做什么的？loader和plugin的区别什么？
• 5.关于webpack的优化建议等
  聊聊webpack