一面 2022/2/23 45min：凉

• 介绍项目工作

• 项目中的一个难点/记忆深刻的点

• 有做了哪些优化：防抖、节流

• 项目是多页应用还是单页应用

• 为什么用vue

• vue父子组件生命周期的过程

• vue-router的原理？

• 路由配置用什么模式？默认哈希

• vue的数据响应原理？数据劫持+发布订阅

• vue3是怎么实现数据响应？讲了vue2.x的不足，vue3用proxy

• vue.nextTick()原理 ？讲得不好，不熟练

• 了不了解react？没用了，讲了函数式编程和composition api

• 有没有写过自定义指令？Vue.directive

• 打包用webpack吗？用了vue-cli的内置webpack

• 有没有自己配置过webpack的配置？添加了sass-loader

• 讲一下loader和plugin

• vue中怎么确定当前的环境变量 ？不懂，面试官说和plugin有关

• 有没有考虑项目上线后用户的使用情况怎么采集 ？没有。。后面面试官说他们部门就有做这方面的东西

• 你说前端两个人，怎么对一个需求进行分工之类

• 前端页面是怎么设计的？没设计。。。硬上

• 如果想给你的项目实现一个换肤功能 ，怎么实现？

• 那怎么切换css呢？

  • 晕了。。面试时不太懂意思。下来查了一下原来是如何对css文件进行切换

• 项目的前后端登录鉴权怎么实现 ？

• 每次发请求都要从localStorage取出来在请求，为什么不放到cookie

  • 讲了过期时间的问题，面试官说cookie也可以设置过期时间啊

  • 又讲了前端cookie安全的东西，说了下cors（说错了应该是csrf的。。。）凉凉

• 讲一下浏览器的缓存。强缓存和协商缓存

• 项目的资源走cdn嘛？没有。。

• 项目的资源有没有考虑缓存？没有。。

• JS的事件处理机制？事件捕获和事件冒泡

• 事件委托的原理？事件冒泡

• 上下两栏如何自适应

  • flex，忘了说要设置 flex-direction: column。面试官说不用flex怎么实现

  • position

• 有没有做过移动端的自适应？

----然后网就卡了，一直听不到，面试官直接打电话过来说做题吧

• 代码题：

  • [{a:1, b:2}, {a:2, b:3}, {a:1, b:1}, {a:3, b:1}] 找出a最小，然后再a最小的条件下b最大的对象

    • 写了个sort，面试官说不太行

    • 写了个sort加循环，面试官说能不能一次循环搞定

    • 讲了思路，面试官说ok了

  • 防抖函数

    function debounce(fn, time) {
        let timeout = null;
        // 闭包
        return function() {
    	    clearTimeout(timeout);
    	    timeout = setTimeout(() => {
    		    fn.apply(this, arguments);
    	    }, time);
        }
    }

    面试关说有点问题，这样第一次调用的话还是要等待 time，让改成第一次的时候直接执行，后面在setTimeout。加了个判断，面试官说ok了

    function debounce(fn, time) {
        let timeout = null;
        let flag = true;
        // 闭包
        return function() {
            if (flag) {
    		    fn.apply(this, arguments);
                flag = false;
            } else {
                clearTimeout(timeout);
                timeout = setTimeout(() => {
                    fn.apply(this, arguments);
                }, time);
            }
        }
    }

• 反问

  • 部门业务

  • 技术栈是不是react较多

  • 面试评价和学前端的建议

    • 面试评价得下去综合后再能给

    • 在校生注重基础