2021-05-20

外包企业面试真题-前端工程师

以基础知识占比最大，vue是重点

面试重点（切记）：简述重要名词的功能，市场主要使用那种，这几个之间的优劣和对应场景（区别），不要像背课文，如果你知道更多相关知识、积极的讲给面试官（加分项）
1.盒子模型 context、padding、border、margin
W3C标准盒子模型（标准盒模型）、IE标准盒模型（怪异盒模型）
两者区别：标准盒模型的宽高是内容的宽高、怪异盒模型的宽高是内容+边框+内边距的和
拓展：通过box-sizing属性来设置盒子模型的解析模式，赋两个值context-box，border、padding不算到盒子的宽高里面，可以理解为W3C的标准盒子模型。border-box，border、padding算到盒子的宽高里面，可以理解为IE的怪异盒子模型。
2.vue的生命周期
vue实例从创建到销毁就是生命周期，主要有开始创建、初始化数据、编译模板、挂载dom（渲染）、更新（渲染）、卸载等一系列过程。
beforecreate 实例初始化后，数据观测（data observe）和 event/watcher 事件配置之前被调用
created 实例创建完成后立即被调用。此阶段内，实例已经完成了数据观测（data observe）属性和和方法的运算，watch/event事件回调；但是挂载阶段还没有开始，$el属性还不可见。\ast beforemount\ast 挂载开始之前被调用，相关的render函数首次被调用\ast mounted\ast el被新创建的vm.$el替换，并且挂载到实例上之后调用该钩子，如果root实例挂载了一个文档内元素，当mounted被调用时vm.$el也在文档内
beforeupdate 数据更新时调用，发生在虚拟dom打补丁之前，这里适合在更新前访问现有的dom，比如手动移除已经添加的事件监听器，该钩子函数在服务器端渲染时不会调用，因为只有初次渲染时会在服务端进行。
update 由于数据更改导致虚拟dom重新渲染和打补丁，在这之后会调用该钩子函数
activated keep-alive组件激活时调用，该钩子函数在服务器端渲染期间不会被调用2
deactivated keep-alive组件停用时调用 ，该钩子函数在服务器端渲染期间不会被调用
beforedestroy 实例销毁前调用，在这一步实例仍然完全可用，该钩子函数在服务器端渲染期间不会被调用
destroyed vue实例销毁后调用，vue实例所有的东西都会被解除绑定，事件监听都会被移除，所有的子实例都会被销毁，该钩子函数在服务器端渲染期间不会被调用
errorcaptured新增 当捕获一个来自子孙组件的错误时被调用，此钩子会收到三个参数: 错误对象、发生错误的组件实例、包含错误信息来源的字符串，此钩子函数可以返回false并且阻止该错误继续向上传播。
3.组件缓存
使用到vue的内置组件包裹动态组件，会缓存不活动的组件实例，主要用于保留组件状态或者避免重新渲染。
4.跨域及解决方式
跨域指的是浏览器不能执行其他网站的脚本，是由浏览器对JavaScript施加的安全限制，因为同源策略造成的。
同源策略是指，协议、域名、端口相同；是客户端脚本（尤其是JavaScript）的重要安全度量标准。
jsonp 动态创建一个script标签，利用他的src属性不受同源策略限制（herf属性也不受限制），可以请求第三方服务器数据。

var script = document.createElement("script");
script.src = "HTTP://127.0.0.1:8888/index.php?callback = jsonpCallback";
document.head.appendChild(script);

注意：通过定义函数名来接收后台返回数据 function jsonpCallback（data）{
jsonp返回的是json对象，可以直接使用
Ajax 取得的数据是json字符串，需要先转换成json对象才可用
}
CORS跨域资源共享：服务器端设置Access-Control-Allow-Origin HTTP请求头之后，浏览器会允许跨域资源请求。
反向代理；VUE中常用
通过修改vue.config.js文件，增加proxy设置设置，这样配置以后，就可以通过http://localhost:3000/meituan来调用豆瓣的API了

module.exports = {
    devServer: {
        port: 3000,
        proxy: {
            '/meituan': {
                target: 'https://meituan.uieee.com/v2/movie',
                changeOrigin: true,
                pathRewrite: {
                    '^/meituan': ''
                }
            }
        }
    }
};

window.name+iframe window对象的name属性可以设置或者返回存放窗口的名称的一个字符串，同一个浏览器窗口或者同一个iframe载入的页面共享一个window.name(只要你不关闭这个页面，只改变网址，window.name不变，每个打开的页面都能获取并且修改window.name的值)
父页面能够通过iframe的contentWindow属性访问到子页面的内容（不跨域的情况下）。利用iframeObj.contentWindow.name是能够获取到iframe窗口内同一域名页面的window.name
5.防抖和节流
函数防抖 （debounce）：当持续触发事件时，一定时间内没有再触发事件，事件处理函数才会执行一次；如果在设定时间到来之前又触发了一次事件，就会重新计时。几次事件处理函数合并为一次
函数节流（throttle）当持续触发事件时，保证一定时间段内只调用一次事件处理函数。在页面无限加载，Ajax请求适合使用节流
6.Async和await
async/await是用来解决异步请求的，async函数是Generator函数的语法糖；async函数返回一个Promise对象，可以使用then方法添加回调函数，当函数执行时遇到await函数就会先返回，等到异步操作完成，再执行函数体内部后面的语句
7.Async相对于Generator的优势
async函数自带执行器、更好的语义化、更广的适用性（async函数的await后面可以是Promise或者原始类型的值）、async返回的是promise对象，可以使用then方法直接调用
8.组件通信（父传子、子传父）
父向子：在父组件中设置要传的数据，在父组件中引用的子组件上绑定一个自定义属性并把数据绑定到自定义属性上，在子组件添加props参数接收即可
子向父：子组件通过vue实例方法$emit进行触发并且可以携带参数，父组件监听使用（v-on进行监听）然后进行方法处理非父子组件之间通信：引入第三方newvue定义为eventBus、在组件中创建订阅方法eventBus$on(“自定义事件名”，methods中的方法名)、在另一个兄弟组件中的methods中写函数，在函数中发布eventBus.$emit(“自定义事件名”)、在组件的template中绑定事件
9.vue中设置ref时，对象和数组怎么区分
10.性能优化问题，图片懒加载、路由懒加载、精灵图、组件按需引入不要全局注册
11.vue阻止事件冒泡
@click=’show( $even t)’ 有了事件对象，函数可以利用原生中的 event.cancelBubble=true
@click.stop=’show()’ 只要在事件后面加 .stop 就可以阻止事件冒泡。
12.vue阻止默认事件
@click=“show( $event )” 有了事件对象，函数就可以利用原生中的 event.preventDefault();
@click.prevent=‘show()’ 只要在事件后面加.prevent 就可以阻止默认事件。
13.双向绑定的原理
通过Object.defineProperty(obj, prop, descriptor)方法来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调，obj要在其上定义属性的对象。prop要定义或修改的属性的名称。descriptor将被定义或修改的属性描述符。
14.git代码管理工具，基本的操作命令
15.scoped和/deep/
scoped私有作用域；作用： 让当前样式只作用于当前组件而不污染全局，scoped通过使用 PostCSS 来实现转换，给 HTML 的 DOM 节点加一个不重复属性 data-v-f3f3eg9 标志唯一性，会造成打包体积过大
/deep/深度作用选择器；作用：在使用 scoped 属性后，达到了样式的组件隔离作用，但是如果引用它的父组件，想修改/增加其样式时，只能通过深度作用选择器来实现。
16.清除浮动的方法
overflow：hidden或者overflow：auto；给父级元素设置双伪元素；给父级元素添加clearfix。
17.定位（相对定位、绝对定位、固定定位、粘性定位）
18.ES6的新增方法
声明命令let表示变量 const表示常量；模板字符串；函数默认参数；箭头函数；import和export；Promise对象；Object.keys()获取对象的所有属性名或方法名，返回一个数组
19.数据可视化
echarts基本用法：初始化类、创建echarts实例、样式配置xAxis配置横轴类别为category类别渲染图展示表。
20.模块化的理解和common.js的区别
模块化： 是具有特定功能的一个对象（ 广义理解 ）可以存储多个独立的功能块，复用性高
种类：AMD（ require.js）CMD ( sea.js ) Common.js
CommonJs用在服务器端，AMD和CMD用在浏览器环境
AMD定义一个模块：使用define来定义，用require来使用模块
CMD定义模块：使用define来定义，用require来使用模块
Node.js使用了Common.js的规范
Node.js中Common.js规范的使用有三种类型：
第一种：内置模块（ 内置模块指的是挂载在Node.js全局对象身上的api ）
内置模块可以直接使用 ( require中直接书写模块名称 )
格式：const/let/var 变量名 = require( 模块名称 )
第二种：自定义模块
第三种：第三方模块（别人封装好的模块）
格式：var/let/const 变量名 = require( 模块名称 )
21.vue刷新页面和不刷新页面触发的钩子函数
再次进入缓存的页面，只会触发beforeRouteEnter -->activated --> deactivated 。
22.在vue项目中遇到的问题
调接口参数格式不正确
23.vue中的nextTick
解决异步更新，在下次DOM更新循环结束之后延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。
Vue生命周期的created钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中
vue 改变 dom 元素结构后使用 vue. $nextTick()方法来实现 dom 数据更新后延迟执行后续代码
在使用某个第三方插件时 ，希望在 vue 生成的某些 dom 动态发生变化时重新应用该插件，这时候就需要在 $nextTick 的回调函数中执行重新应用插件的方法。
24.平时学习在用什么网站
MDN GitHub Medium Stack Overflow
25.问面试官的问题
团队情况，公司组织结构，项目进展情况，业务方向，使用的技术，为什么选择这家公司
回答问题要条理清晰，不要卡顿，尽量不要用书面语，结合自己的思考讲述