2022年前端面经

随心808
265 阅读5分钟

货拉拉一面（已挂 10-10）

自我介绍

Vue相关

1. 说一说对vue生命周期的理解

vue2.x生命周期图示

image.png

超详细vue生命周期解析(详解)

  • beforeCreate （创建前）
  • created（创建后）
  • beforeMount（dom挂载前）
  • mounted（dom完成挂载）
  • beforeUpdate（更新前）
  • updated（更新后）
  • beforeDestroy（组件销毁前）
  • destroyed（组件销毁后）

vue3.x生命周期图示 参考

image.png

  • beforeCreate （创建前）

  • created（创建后）

  • beforeMount（dom挂载前）

  • mounted（dom完成挂载）

  • beforeUpdate（更新前）

  • updated（更新后）

  • beforeUnmount（组件销毁前）

  • unmounted（组件销毁后）

  • errorCaptured

  • renderTracked(dev only)

    在一个响应式依赖被组件的渲染作用追踪后调用。

  • renderTriggered(dev only)

    在一个响应式依赖被组件触发了重新渲染之后调用。

  • activated

    若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。

  • deactivated

    若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。

    这个钩子在服务端渲染时不会被调用。

  • serverPrefetch (SSR only)

    当组件实例在服务器上被渲染之前要完成的异步函数。

2. vue的组件状态传递的方式

Vue组件传参的五种方式

props 传参

事件传递

事件监听

父组件

<template>
    <div class="wrap">
        <div>我是Father组件</div>
        <Son ref="son"></Son>
    </div>
</template>

<script>
    import Son from './Son'
    export default {
        name: "Father",
        mounted(){
            this.$refs['son'].$on('func',(msg)=>{
                console.log(msg);
            })
        },
        components:{
            Son
        }
    }
</script>

子组件

<template>
    <div>
        <div>我是Son组件</div>
        <button @click="$emit('func','我是子组件传递的消息1！')">
            Send1
        </button>
        <button @click="sendMsg">Send2</button>
    </div>
</template>

<script>
    export default {
        name: "Son",
        methods:{
            sendMsg(){
                this.$emit('func','我是子组件传递的消息！');
            }
        }
    }
</script>

消息发布订阅

  1. 使用 pubsub-js插件: 可实现全局参数传递

npm i pubsub-js -s 

  1. pubsub-js的使用

组件A

<template>
    <div class="wrap">
        <div>我是组件A</div>
        <button @click="sendMsg">发送</button>
    </div>
</template>

<script>
    import  pubsub from 'pubsub-js'
    export default {
        name: "A",
        methods:{
            sendMsg(){
                pubsub.publishSync("sendMsg","这是A组件发布的消息！");
            }
        }
    }
</script>

组件B

<template>
    <div>
        <div>我是组件B</div>
    </div>
</template>

<script>
    import pubsub from 'pubsub-js'
    export default {
        name: "B",
        mounted(){
            pubsub.subscribe("sendMsg",(e,msg)=>{
                console.log(e,msg);//sendMsg 这是A组件发布的消息！
            })
        },
    }
</script>

3.api的使用方法

  • publishSync --- 同步发送消息
  • publish --- 异步发送消息
  • subscribe --- 订阅消息
  • unsubscribe --- 取消特定订阅
  • clearAllSubscriptions --- 清除所有订阅

EventBus传参

  1. 在main.js中挂载全局EventBus
Vue.prototype.$EventBus = new Vue()
  1. 在组件之间使用

组件A

<template>
    <div class="wrap">
        <div>我是组件A</div>
        <button @click="sendMsg">发送</button>
    </div>
</template>

<script>
    export default {
        name: "A",
        methods:{
            sendMsg(){
               this.$EventBus.$emit('sendMsg',"这是组件A发送的消息！")
            }
        }
    }
</script>

组件B

<template>
    <div>
        <div>我是组件B</div>
    </div>
</template>

<script>
    export default {
        name: "B",
        mounted(){
            this.$EventBus.$on('sendMsg',(msg)=>{
                console.log(msg);//这是组件A发送的消息！
            })
        },
    }
</script>

3. 对vue的nextTick的理解

浅析Vue.nextTick()原理

4. vue与react的区别

Vue和React的区别到底是什么？

5. vue的响应式原理

  • 从 new Vue 开始，首先通过 get、set 监听 Data 中的数据变化，同时创建 Dep 用来搜集使用该 Data 的 Watcher。
  • 编译模板，创建 Watcher，并将 Dep.target 标识为当前 Watcher。
  • 编译模板时，如果使用到了 Data 中的数据，就会触发 Data 的 get 方法，然后调用 Dep.addSub 将 Watcher 搜集起来。
  • 数据更新时，会触发 Data 的 set 方法，然后调用 Dep.notify 通知所有使用到该 Data 的 Watcher 去更新 DOM。

react相关

1. 说说react的hook

  • 用来解决什么问题
  • 常用的hook的使用方法以及原理
  • 实现过的自定义hook

官方文档

2. react性能优化

从源码中来，到业务中去，React性能优化终极指南

webpack

  • loader与plugin的区别
  • 常见的loader及其用法
  • 常见的plugin与用法
  • 如何使用webpack提高开发效率
  • webpack的构建流程
  • webapck的热更新原理
  • 手写 loader 与 plugin
  • 如何提高构建效率
  • 如何提高页面性能
  • babel原理
  • 多线程打包原理
  • 代码分割

「吐血整理」再来一打Webpack面试题

js相关

1. async await 的理解

阮一峰的网络日志

2. 事件循环机制

JavaScript中的Event Loop（事件循环）机制

设计模式

面试总结之设计模式专篇

面试必考设计模式

浏览器原理

《浏览器基本原理与实践》36点总结，让我重新认识浏览器

1. 浏览器内核组成

2. 输入一个url到页面显示发生了什么

TS相关

一篇够用的TypeScript总结

1. 在项目中如何使用

2. type与interface的区别

3. 对declare的理解

4. 对泛型的理解

nodejs相关

github.com/Wscats/node…

总结

  1. 自我介绍部分仍需要加强
  2. vue2年没用，对原理毫无了解
  3. webpack大部分loader与plugin都能理解，但是讲述的时候条理性需要加强
  4. 设计模式需要学习，只了解过一些
  5. 对react官方的hook的功能都清楚，能够熟练运用，但是原理层面需要加强理解
  6. 浏览器的原理大部分常考的都清楚，但是在面试过程没有引导面试官多进行提问，导致面试官问的不多
  7. 对TS的应用不够，包括对一些常考的知识点没有进行总结
  8. nodejs的应用不够，短期内需要实现一个koa的项目，进行锻炼。再加强一些常考知识点的总结
  9. 没有考到计算机原理以及react相关的更多知识点，有点可惜。。。

探迹一面（已挂 09-26）

js基础

1. 哪些操作可能导致内存泄漏

2. 数组去重的方法有哪些

3. 闭包

涉及缓存的所有内容

技术攻坚的案例

webpack

1. webpack的loader与plugin的qubie

2. webpack的常用的一些loader跟plugin

3. webpack性能优化

4. webpack多进程编译的原理

5. webpack的externals如何实现

6. webpack如何实现多入口

计算机网络

1. 强缓存与协商缓存

2. cache-control no-cache与no-store的区别

react

1. react hook主要解决了哪些问题

css相关

1. 重排与重绘的区别

2. 哪些样式操作触发重排哪些触发重绘

3. css3的transform是重排还是重绘

总结

  1. 对js的基础理解不够
  2. webpack此时记不住常考知识点
  3. 对重排与重绘不理解
  4. 对浏览器布局与绘制过程不熟悉
  5. react hook没有实现自定义hook的经验
  6. 不清楚react hooks的作用以及推出目的
  7. 技术攻坚部分的阐述例子不够，解决方案不够成熟
avatar
文章
阅读
粉丝