美团2023暑期实习面经

美团2023暑期实习5.15面试记录 说说vue和react的区别

我说的是双向绑定和单项数据流方面，感觉说的不是很全面。
相同点：

都支持服务器渲染都有虚拟dom，支持组件化开发，通过props进行父子组件间的传递都是数据驱动视图都有状态管理，比如vuex和redux等等

不同点：

react是mvc模式，vue是mvvm模式（虽然还不太懂mvc和mvvm具体含义）组件写法不一样 ，react 是 jsx 和 inline style ，就是把 html 和 css 全 写进 js 中，vue 则是 html，css ，js 在同一个文件数据绑定不一样，vue 实现了数据双向绑定，react 数据流动是单向的在 react 中，state 对象需要用 setstate 方法更新状态，在 vue 中，state 对象不是必须的，数据由 data 属性在 vue 对象中管理虚拟 dom 不一样，vue 会跟踪每一个组件的依赖关系，不需要重新渲染 整个 dom 组件树，而 react 不同，当应用的状态被改变时，全部组件都 会重新渲染，所以 react 中用 shouldcomponentupdate 这个生命周期 的钩子函数来控制 微任务和宏任务

我就简单的说了一下在event loop中的调用顺序，在执行宏任务之前，要先把已入队的微任务全部执行完，再执行下一条宏任务。

宏任务（发起者:宿主（Node、浏览器））:
script(整体代码)、setTimeout、setInterval、setImmediate(Node.js 环境)、UI事件、I/O（Node.js）

微任务（发起者: JS引擎）:
Promise、MutaionObserver、process.nextTick（Node.js）

apply，call，bind三者的区别 三者都用来改变this指向。三者第一个参数都是this要指向的对象，如果如果没有这个参数或参数为undefined或null，则默认指向全局window。三者都可以传参，但是apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入。bind 是返回绑定this之后的函数，便于稍后调用；apply 、call 则是立即执行 。 用vue和react都用什么组件库

问这个主要是因为我项目里涉及到的有静态页面的东西。vue我说的iview react说的蚂蚁的antd。问哪个比较好用。然后就开始瞎说

问前后端通信用什么实现

我说的ajax，又问ajax请求的步骤。

创建 XMLHTTPRequest 对象 使用 open 方法创建 http 请求，并设置请求地址xhr.open(get/post，url，async，true(异步)，false(同步))经常 使用前三个参数设置发送的数据，用send 发送请求注册事件(给 ajax 设置事件)获取响应并更新页面 es6的新特性

答const 和 let、模板字符串、箭头函数、函数的参数默认值、对象和数组解构、for…of 和 for…in、ES6 中的类这些比较宽泛的，然后深入问箭头函数

用 Promise 来解决什么问题? 回调地狱多并发请求 然后手写代码的部分没有抽算法题，要实现一个基于Promise 接口调用方式

太紧张了没写过，一直忘了传参还把请求类型都写死了。小姐姐一直提醒我后来改过来了，但都是很低级的错误，哈哈。大概感觉她想要的应该就是这样的东西

function myAjax(callback = ((data) => undefined), url = "/", method = "POST", data = {},  flag = "true") {
    var xhr; /*兼容IE*/
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest()
    } else { /*IE*/
        xhr = new ActiveXObject("Microsoft.XMLHttp");
    }
    if (String.prototype.toUpperCase.call(method) === "GET") {
        xhr.open('GET', url, flag);
    } else {
        xhr.open(method, url, flag);
    }
    xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
    xhr.send(JSON.stringify(data));
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status == 200) {
                callback(JSON.parse(xhr.responseText || JSON.stringify({})))
            }
        }
    }
}
 
function queryData(url, params) {
    return new Promise((resolve) => {
        myAjax(resolve, url, params)
    })
}

第二题让我写数组去重

先问的我es6里怎么实现，有什么思路，我说的可以用map和set，但是后来写的时候又不想用set（）写了，用sort排序写的，她问我为什么其实是感觉set有点忘了怎么写，但sort排序去重感觉复杂度比set低一些，于是就这么说了，运气好。

最后问了问怎么学习，最近有什么比较关注的前端技术之类的，还问了兴趣爱好

最近有什么比较关注的，比较前沿的前端技术这个问题感觉还挺重要的，几乎每次面试都会被问。

大概就这些啦，面试官是个人很好的小姐姐，体验不错，就是面的太久了。。。