㈠ 2022前端开发面试记录（深圳篇）
2022年来到深圳，感觉到了与之前所在城市的差异，心里多少有点落差。虽然时机不太对吧，但是相信一切都会好起来的，给自己加油呀！
整理了一些面试被问到的问题，虽然很多是无效面试，但是我也强行问了面试官，从他们的回答中猜测了一下他们关注的面试点，所以也算是有点收获吧，只是浪费了很多简历和路费，哭唧唧。
——1、区块链——
1-1、vue生命周期；
1-2、vuex属性；
1-3、用户开始登录到登录成功都发生了什么；
1-4、git常用的命令；
——2、金融：vue——
笔试：
2-1、深浅拷贝的区别，为什么会出现深浅拷贝，浅拷贝的优势；
2-2、强制中断 foreach 遍历；
2-3、多处组件复用；
2-4、你对前端是什么概念，前端在整个软件生态内是什么角色；
2-5、Vue2 中数据变化但视图没有发生同步更新，描述一下出现的场景，解决方式，以及该问题发生的可能原因；
2-6、nextTick 是如何确保开发者能够获取到最新的 DOM 状态的；
2-7、如何使用 mixins，有何利弊；
2-8、使用 Hooks 模式开发时，useMemo，useCallback 常用来作为优化的手段。描述一下它们各自的适用场景，以及背后的原理实现?；
2-9、前端从 Jquery 时代演变至如今的三大框架，这种演变的根源是什么，jquery 解决了什么问题，如今的三大框架又是为了解决什么问题出现的？
视频面试：
2-10、js遍历树形结构，每个节点都有一个唯一ID，只能遍历一次；
2-11、组件封装的意义；
——3、知识产权：vue2、vue3、ts、react——
3-1、说一说面向对象的理解，包括继承、封装、多态等；
3-2、说一说promise；
3-3、webpack优化；
3-4、vuex使用场景；
3-5、描述一下对vue响应式原理的理解；
3-6、vue生命周期；
3-7、父子组件钩子函数执行顺序；
3-8、v-if和v-show；
3-9、js数据类型；
3-10、实现深拷贝；
——4、物流——
4-1、vue生命周期；
4-2、生命周期-修改元素样式在生命周期的哪个阶段；
4-3、生命周期-修改数据在哪个阶段；
4-4、生命周期-destroy里面会做哪些操作；
4-5、怎么修改title的内容；
4-6、父子组件传参的具体写法；
4-7、v-model的多种写法；
4-8、js数据类型；
4-9、判断数组的方法；
4-10、实现左边固定右边自适应的布局；
4-11、实现div垂直水平居中；
4-12、flex:1；
4-13、flex详解；
4-14、call,apply,bind是干什么的；
——5、新兴产业——
5-1、封装路由，怎么拦截路由；
5-2、浏览器缓存有哪些，又问localStorage和sessionStrorage的区别和应用场景；
5-3、浏览器强缓存和协商缓存；
5-4、webpack打包机制，构建过程和配置；
5-5、性能优化方法；
5-6、前端的业务和后端的API是怎么做到数据实时请求的（问的其实是前端对后端API接口的封装和管理）；
5-7、computed和watch；
5-8、说了几个关于大屏的应用场景，有没有做过，怎么做的；
——6、某水果：vue2、vue3、ts、各种前沿技术都用——
6-1、怎么封装一个组件库/工具类库，比如vue封装过什么复杂组件，jquery封装过什么类库；
6-2、get和post的区别，传参格式等；
6-3、promise怎么用的；
6-4、原型链，test()的原型链；
6-5、websocket；
6-6、es6中的generator；
6-7、es6中的set和map有啥区别，set为什么能去重；
6-8、项目难点；
——7、医疗健康：vue——
7-1、vue自定义指令配置；
7-2、webpack的理解；
7-3、对node的了解，用过express吗；
7-4、项目中的拖拽是怎么做的；
7-5、websocket和socket的区别；
7-6、听过mqtt吗，因为没听过所以解释了一下activemq的用法；
7-7、二维地图的聚合，如果有十万个点，会做什么优化；
7-8、地图实现多个点连成一条线会怎么做；
7-9、地图实现一条曲线；
7-10、内网下git怎么用的；
7-11、openlayers渲染机制；
7-12、父子组件通信方法；
7-13、router中实现拦截；
7-14、对象合并的方法；
7-15、父子组件的生命周期执行顺序，渲染阶段为什么会先执行父组件再执行子组件；
7-16、vue生命周期；
7-17、npm run dev, run build可以在项目中的什么位置找到；
7-18、vue中跳转页面的方法；
7-19、mixins用过吗；
7-20、判断引用类型的方法；
7-21、js数据类型；
7-22、判断基本数据类型的方法；
7-23、for in和for of的用法和区别，两者遍历的是索引还是属性值，两者都可以遍历对象吗；
7-24、foreach和map的区别，两者会不会改变原数组；
7-25、主要用什么技术栈；
7-26、行内元素和块级元素的区别，分别都有哪些，行块级元素有哪些；
7-27、div垂直水平居中，grid知不知道怎么用；
7-28、splice和slice；
——8、智慧园区：vue2、vue3、ts、uniapp——
8-1、flex了解吗，flex布局方向，flex:1 0的页面效果是怎样的；
8-2、做过移动端吗，了解uniapp吗；
8-3、keep-alive；问了一个没听明白的，可能和keep-alive有关系；
8-4、vuex中的action；不用vuex，怎么代替vuex；
8-5、promise.all和promise.on；
8-6、防止表单重复提交；
8-7、async，await的使用；
8-8、vue3和ts的了解；
8-9、防抖怎么控制时间；
8-10、vue中的data为什么要设计成一个函数；
——9、智慧工地：vue、uniapp、小程序——
9-1、Vuex是干什么的；
9-2、openlayers怎么用的；
9-3、性能优化；
9-4、spa首屏加载优化；
9-5、bundler.js太大，打包怎么优化；
9-6、加密方式了解多少，比如md5,base64等，一大堆没听过的；
9-7、冒泡排序的实现原理；
9-8、js设计模式；
——10、某快递公司外包——
10-1、一棵树的数据，给的是列表格式，转换成树形结构；
10-2、项目相关的，聊天怎么做的，拖拽怎么做的，拖拽的数据怎么渲染的，拖拽重叠怎么处理的；
10-3、js设计模式；
——11、三维：vue、cesium——
11-1、一棵树的数据，给的是列表格式，转换成树形结构；
11-2、openlayers怎么用的，发布过wms吗，发布流程是怎样的；
11-3、openlayers转换经纬度的方法名是什么；
11-4、cesium常用的函数；
11-5、vue数据双向绑定原理；
11-6、Vue中data属性如果改变一个数组的下标，会不会马上发生变化，不变化可以怎么解决
11-7、数组常用方法有哪些；
11-8、 map和filter的区别；
11-9、es6常用的方法；
11-10、父子组件通信，兄弟组件通信；
11-11、new具体进行了什么操作；
——12、医疗：vue、angular——
12-1、js渲染机制和运行机制；
12-2、vue数据绑定原理；
——13、建设行业：vue、uniapp——
笔试：
13-1、||与&运算符；
13-2、垂直居中方案；
13-3、let a=arr, b=a, c=arr.concat(), a[0]=3，打印b和c，应该是深浅拷贝；
13-4、实现font-size:12；
13-5、接口路径，给一个地址 http://localhost/projectname/resource/index(http://localhost/projectname/resource/index).html ，根据url请求接口路径写出完整路径，’/ geturl.do ’，’ geturl.do ’，’../ geturl.do ’；
13-6、微信小程序流程和主要文件；
13-7、获取url参数及内容；
13-8、$(function(){}) / (function(){}) / (function(){})()的区别；
13-9、前端优化方案；
面试：
13-10、项目难点；
13-11、git工作流；
13-12、jquery项目会不会用webpack打包；
13-13、webpack优化；
13-14、web优化；
——14、文化：uniapp——
14-1、ssr渲染；
14-2、ajax和axios的区别；
14-3、cookie和session的区别；
14-4、vue生命周期；
14-5、数据请求写在哪个生命周期中；
14-6、router的history模式和hash模式；
14-7、工作中的开发流程；
14-8、uniapp的开发流程和坑；
14-9、uniapp滑动问题，下滑切换视频不生效，一般是什么原因；
14-10、uniapp加载速度慢，点击加载图片速度太慢，一般是什么原因；
——15、企业平台某外包：vue，node，性能优化——
15-1、说一说websocket；
15-2、vue数据双向绑定原理；
15-3、项目难点；
15-4、对mvvm、mvc、mvp等的理解；
15-5、vue的常见指令；
15-6、computed和watch；
15-7、class和style怎么绑定；
15-8、ajax和axios的区别；
15-9、axios拦截器，axios的post请求；
15-10、对前端渲染，服务端渲染的理解；
——16、智慧城市：vue，node，three.js——
16-1、vue生命周期；
16-2、vue组件通信方法；
16-3、js的继承；
16-4、oracle、mysql、sqllite的区别；
16-5、oracle连表查询；
16-6、openlayers项目场景；
16-7、cesium项目场景；
——17、租房：jquery+layui，vue2——
17-1、笔试：
17-2、foo打印题；
17-3、this打印题；
17-4、变量提升打印题；
17-5、let arr=[1,2,[5,8,[9,[3,5,]7,]20,37]] 把数组扁平化成一个数组，并进行去重升序;
17-6、let a=[1,2,3,4,5,6,7]; let b=[4,5,6]; 求b在a中第一次出现的位置；
17-7、面试：主要问项目
——18、跑腿：vue2，vue3+ts——
18-1、对html5语义化的理解；
18-2、css实现一个三角形；
18-3、css怎么实现0.5px的线，为什么有这种需求，涉及到兼容性问题；
18-4、怎么解决变量提升的问题；
18-5、es6新增了哪些定义变量的方式；
18-6、const定义的变量可以被修改吗；
18-7、map和filter的区别，会改变原数组吗；
18-8、es6去重的方法；
18-9、谈一谈对promise的理解；
18-10、除了链式调用，promise还可以怎么处理同步请求(async/await)；
18-11、对vue响应式原理的理解，核心是什么；
18-12、对vue生命周期每个阶段的理解；
18-13、为什么要用key，key有什么作用；
18-14、v-if和v-show；
18-15、Vue中data为什么是一个函数；
18-16、vue各场景下的传值方式有哪些，比如父子组件，兄弟组件，祖孙组件；
18-17、对vuex的理解和使用场景；
18-18、vue常见修饰符；
18-19、Vue3用过吗(因为没用过，所以就只针对响应式原理说了一下vue3和vue2的区别)；
——19、实业：jquery，vue2，vue3——
笔试：需要解释
19-1、html5新标签，css3新特性；
19-2、js+css3实现某元素以50px每秒的速度左移100px；
19-3、css实现左中右布局，不改变文档流；
19-4、js兼容性有哪些，以及常见的解决方案；
19-5、描述一下事件循环机制eventloop，eventloop解决了什么问题；
19-6、给了一个题，大概是后端返回的接口数据，data的格式有很多，比如null，对象，数组，字符串等，怎么处理这种问题；
19-7、前端性能优化方法，首屏页面怎么优化；
19-8、用js写一个方法实现数据去重并排序(用es5和es6+实现)；
19-9、给定一个数组，把数组中为0的往后排，其他值按顺序排序; （示例：[1,0,4,0,5,3]转换结果为[1,3,4,5,0,0]）
19-10、用0，1，2代表红黄蓝三种颜色，实现以下排序，不能用array.sort实现;（示例：[0,1,0,2,0,1,2]转换结果为[0,0,0,1,1,2,2]）
面试：
19-11、flex布局；flex:1对应的属性；
19-12、讲一下原型链； proto 和prototype有什么区别；字符串有没有原型；给定一个str，str.test()调用的谁的test方法；
19-13、讲一下闭包；什么情况下才能算是闭包；形成闭包的条件；列了三个题让你判断是不是闭包；
19-14、v-if和v-show是干什么的；应用场景有哪些；给定一对父子组件，默认值是false，另外有一个ajax请求，值发生了以下变化（false true false true true），在v-show和v-if中，父子组件的哪个阶段里会请求ajax；
19-15、computed的实现原理，怎么实现一个computed；
19-16、css中，transform，margin，position的都是怎么渲染的，渲染机制是什么；amd，cmd，commonjs了解吗；
㈡ 前端基础必备知识有哪些
基础：HTML/CSS/JavaScript
框架：VUE
UI：elementUI
㈢ vue前端面试题有哪些呢
文章中给你列举了部分的面试题，这些都是公司面试常遇到的，还有需要的还可以自己去查阅一下资料
1、active-class是哪个组件的属性？嵌套路由怎么定义？
答：vue-router模块的router-link组件。
2、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？
答：在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id
3、vue-router有哪几种导航钩子？
答：三种，一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。第二种：组件内的钩子；第三种：单独路由独享组件
4、scss是什么？安装使用的步骤是？有哪几大特性？
答：预处理css，把css当前函数编写，定义变量,嵌套。 先装css-loader、node-loader、sass-loader等加载器模块，在webpack-base.config.js配置文件中加多一个拓展:extenstion，再加多一个模块：mole里面test、loader
4.1、scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？
答：css的预编译。
使用步骤：
第一步：用npm 下三个loader（sass-loader、css-loader、node-sass）
第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss
第三步：还是在同一个文件，配置一个mole属性
第四步：然后在组件的style标签加上lang属性 ，例如：lang=”scss”
有哪几大特性:
1、可以用变量，例如（$变量名称=值）；
2、可以用混合器，例如（）
3、可以嵌套
5、mint-ui是什么？怎么使用？说出至少三个组件使用方法？
答：基于vue的前端组件库。npm安装，然后import样式和js，vue.use（mintUi）全局引入。在单个组件局部引入：import {Toast} from ‘mint-ui’。组件一：Toast(‘登录成功’)；组件二：mint-header；组件三：mint-swiper
6、v-model是什么？怎么使用？ vue中标签怎么绑定事件？
答：可以实现双向绑定，指令（v-class、v-for、v-if、v-show、v-on）。vue的model层的data属性。绑定事件：<input @click=doLog() />
7、axios是什么？怎么使用？描述使用它实现登录功能的流程？
答：请求后台资源的模块。npm install axios -S装好，然后发送的是跨域，需在配置文件中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中
8、axios+tp5进阶中，调用axios.post(‘api/user’)是进行的什么操作？axios.put(‘api/user/8′)呢？
答：跨域，添加用户操作，更新操作。
9、什么是RESTful API？怎么使用?
答：是一个api的标准，无状态请求。请求的路由地址是固定的，如果是tp5则先路由配置中把资源路由配置好。标准有：.post .put .delete
10、vuex是什么？怎么使用？哪种功能场景使用它？
答：vue框架中状态管理。在main.js引入store，注入。新建了一个目录store，….. export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车
11、mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？
答：一个model+view+viewModel框架，数据模型model，viewModel连接两个
区别：vue数据驱动，通过数据来显示视图层而不是节点操作。
场景：数据操作比较多的场景，更加便捷
12、自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？
答：全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives
钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）
钩子函数参数：el、binding
13、说出至少4种vue当中的指令和它的用法？
答：v-if：判断是否隐藏；v-for：数据循环出来；v-bind:class：绑定一个属性；v-model：实现双向绑定
14、vue-router是什么？它有哪些组件？
答：vue用来写路由一个插件。router-link、router-view
15、导航钩子有哪些？它们有哪些参数？
答：导航钩子有：a/全局钩子和组件内独享的钩子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave
参数：有to（去的那个路由）、from（离开的路由）、next（一定要用这个函数才能去到下一个路由，如果不用就拦截）最常用就这几种
16、Vue的双向数据绑定原理是什么？
答：vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
具体步骤：
第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。
ps：16题答案同样适合”vue data是怎么实现的？”此面试题。
17、请详细说下你对vue生命周期的理解？
答：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在
18、请说下封装 vue 组件的过程？
答：首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。
然后，使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法。
19、你是怎么认识vuex的？
答：vuex可以理解为一种开发模式或框架。比如PHP有thinkphp，java有spring等。
通过状态（数据源）集中管理驱动组件的变化（好比spring的IOC容器对bean进行集中管理）。
应用级的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。
20、vue-loader是什么？使用它的用途有哪些？
答：解析.vue文件的一个加载器，跟template/js/style转换成js模块。
用途：js可以写es6、style样式可以scss或less、template可以加jade等
21、请说出vue.cli项目中src目录每个文件夹和文件的用法？
答：assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置;view视图；app.vue是一个应用主组件；main.js是入口文件
22、vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？
答：第一步：在components目录新建你的组件文件（smithButton.vue），script一定要export default {
第二步：在需要用的页面（组件）中导入：import smithButton from ‘../components/smithButton.vue’
第三步：注入到vue的子组件的components属性上面,components:{smithButton}
第四步：在template视图view中使用，<smith-button> </smith-button>
问题有：smithButton命名，使用的时候则smith-button。
23、聊聊你对Vue.js的template编译的理解？
答：简而言之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点）
详情步骤：
首先，通过compile编译器把template编译成AST语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是用以创建编译器的。另外compile还负责合并option。
然后，AST会经过generate（将AST语法树转化成render funtion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）
㈣ 史上最全前端vue面试题！推荐收藏
1.为什么会形成跨域？
不是一个源的文件操作另一个源的文件就会形成跨域。当请求端的协议、域名、端口号和服务器的协议、域名、端口号有一个不一致就会发生跨域。
解决方法：安装插件
Pip install django-cors-headers
2.vuex的工作流程？
① 在vue组件里面，通过dispatch来出发actions提交修改数据的操作。
② 然后再通过actions的commit来出发mutations来修改数据。
③ mutations接收到commit的请求，就会自动通过Mutate来修改state（数据中心里面的数据状态）里面的数据。
④ 最后由store触发每一个调用它的组件更新。
3.vuex是什么？怎么使用？
vuex是一个专为vue.js应用程序开发的状态管理模式。使用:store,getters,mutations,actions,moles详细使用写法请见：https://blog.csdn.net/qq_33226029/article/details/109628600?spm=1001.2014.3001.5502
4.vuex中的数据在页面刷新后数据消失怎么解决？
使用sessionStorage或localStorage存储数据;也可以引入vuex-persist插件
5.在vue中，如何阻止事件冒泡和默认行为？
在绑定事件时，在指令后边加上修饰符.stop来阻止冒泡，.prevent来阻止默认行为
6.深拷贝与浅拷贝？
假设B复制A，修改A的时候，看B是否变化：B变了是浅拷贝（修改堆内存中的同一个值），没变是深拷贝（修改堆内存中不同的值）。浅拷贝只是增加了一个指针指向已存在的内存地址，深拷贝是增加了一个指针并申请了一个新的内存，使这个增加的指针指向这个新的内存。深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体，而不是引用。
7.vue的生命周期？
beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyedactived deactived （keep-alive）组件是否激活调用
8. keep-alive: 组件缓存
https://juejin.cn/post/6844903624099758094
router.js中:
meta: {keepAlive:true} // 需要被缓存
钩子执行顺序：created -> mounted -> actived
include表示需要缓存的页面；exclude表示不需要缓存的页面。如果两个同时设置，exclude优先级更 改，则组件不会被缓存。
应用场景： 用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回 该列表页，我们希望列表页可以保留用户的筛选状态。
9.vue传值方式？
props $emit() $on() $parent $children $listener $attr
10. $on 兄弟组件传值
$emit 分发
$on 监听
$off 取消监听
$once 一次性监听一个事件
在js文件中定义一个中央事件总线Bus，并暴露出来
具体的实现方式：
使用Bus的时候在接收Bus的组件的beforeDestroy函数中销毁Bus，否则会一直叠加调用这个方法。
应用场景：“退出登录” -> ①点击退出登录；②修改密码后自动退出登录
11.组件跨级传值
$attrs a->b->c
$listeners 监听
12.vue事件修饰符有哪些？
.stop .prevent .self .once .passive .sync
13.箭头函数中的this？
不具有this绑定，但函数体可以使用this，这个this指向的是箭头函数当前所处的词法环境中的this对象。
15.为什么vue组件中data必须是一个函数？
如果不是函数的话，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了，当他是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，就不会互相影响。
16.v-if 和 v-show区别？
v-if 是对标签的创建与销毁， v-show 则仅在初始化时加载一次，v-if 开销相对来说比v-show 大；
v-if 是惰性的；v-show 做的仅是简单的css切换。
17.v-text 与 v-html区别？
v-text 用于普通文本，不能解析html；
v-html 反之。
18.v-for key的作用？
使用v-for更新渲染过的数据，它默认用“就地复用”策略。如果数据项的顺序改变，vue将不是移动DOM元素来匹配数据项的改变，而是简单地复用此处每个元素，并确保在特定索引下显示已被渲染过的每个元素。key属性类型只能是string或number。
key的特殊属性主要用在虚拟DOM算法，在新旧node对比时辨识VNods。如不使用key，vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法，它会基于key的变化重新排列元素顺序。
19.Scss是什么？在vue-cli中安装步骤？有哪几大特性？
npm 下载loader （sass-loader,css-loader,node-sass）,在webpack中配置extends属性（加.scss拓展） Vscode中可在扩展中下载;
特性：可以用变量，可以用混合器，可以嵌套等。
20.vue获取dom？
ref
21.vue初始化页面闪动问题？
webpack、vue-router
v-cloak css:[v-cloak]:display:none
22.什么是vue-router？
vue router 是官方路由管理器。
主要功能：路由嵌套，模块化 基于组件路由配置，路由参数、查询、通配符，细粒度导航控制，自定义的滚动条行为等。
23.vue路由传参，接收？
传： this.$router.push({path:'', query(params):{}})
接：this.$router.query.xxx
24.防抖和节流？
节流是一定时间内执行一次函数，多用在scroll事件上；
防抖是在一定时间内执行最后一次的函数，多用在input输入操作，表单提交等。
25.如何让scss只在当前组件中起作用？
㈤ 前端工程师必问面试题vue路由模式路由守卫
vue的路由模式一共有两种，分别是哈希和history，他们的区别是hash模式不会包含在http请求当中，并且hash不会重新加载页面，而使用history模式的话，如果前端的url和后端发起请求的url不一致的话，会报404错误，所以history的原理是利用html5新增的两个特性方法，分别是psuhState和replaceState来完成的，以上就是对vue路由的理解。
路由的导航守卫 又叫做路由的钩子函数（生命周期函数）
就是在跳转页面的时候把路由栏下来，做一些操作在放行，vue一共提供了三种路由守卫。
第一种是全局守卫
beforeEach路由进入之前
afterEach路由进入之后
第二种 组件内守卫
beforeRouteEnter 路由进入之前
beforeRouteUpdate 路由更新之前
beforeRouteLeave 路由离开之前
第三种 路由独享守卫
beforeEnter 路由进入之前
分别是 to from next
next 这个参数 在路由3.x版本的时候，是必须的
但是到了路由4.x版本的时候next参数变成可选的了
一般来说vue2搭配 3.x的路由
vue3搭配 4.x 的路由
比如说购物车页面只有登陆的才能访问，我们可以用组件级守卫购物车页面，如果已经登陆存有token 的话，就继续访问这个页面，如果没有登陆的话就会跳转到登陆页面。
在项⽬中我们经常使⽤路由守卫实现⻚⾯的鉴权. ⽐如:当⽤户登录之后,我们会把后台返回的token以及⽤户信息保存到vuex
和本地,当⻚⾯进⾏跳转的时候,我们会在路由守卫⾥⾯获取vuex⾥⾯的token,如果token存在的话,我们则使⽤next让他进⼊要
跳转的⻚⾯,如果token不存在的话我们使⽤next⽅法让他回到登录⻚
以上就是我对vue路由守卫的理解。
⾸先v-if和v-show都是控制元素的显示与隐藏, 不过v-if控制元素的显
示和隐藏的时候会删除对⽤的dom元素,当每⼀个显示的时候,都会重新创建dom和渲染. ⽽v-show则是通过css的display:none
和display:block来控制元素的显示与隐藏. v-if⽐较耗费性能,所以我们涉及到频繁的显示隐藏操作我们建议使⽤v-show,如果不
是频繁操作的话,我们可以v-if
在项⽬中我会经常使⽤v-if和v-show,⽐如我们在搜索功能的时候,他有⼀个历史记录,这个时候我们根据是否有搜索的结果来判
断历史记录的显示与隐藏,这块我就可以使⽤v-if ,当然⽤v-show也可以. 以上就是我对v-if和v-show的理解。
v-for的优先级⾼. 因为v-for的时候我们才开始渲染dom元素,这个v-if还⽆法进⾏判断.
v-for和v-if不能同时使⽤,我们可以通过标签,⽐如div或者template标签来进⾏包裹,把v-if写到包裹的标签上⾯(写到v-for外⾯)。
⾸先呢,methods是⽤来定义⽅法的区域,methods定义的⽅法需要调⽤才能触发. 不具备缓存⾏
⽽computed是计算属性,他依赖于属性值的变化,当属性发⽣改变的时候,计算属性⾥⾯定义的⽅法就会触发,computed具有缓
存性,依赖属性值的变化⽽变化.
⽽watch主要是⽤于监听,不具备被缓存性.依赖于数据变化⽽触发.
在项⽬中,⽐如我们获取state的状态的时候我们会把它放到computed⾥⾯,或者在写购物⻋数量计算的时候也会使⽤计算属性.
⽽watch也在项⽬经常使⽤,⽐如我们封装编辑 和 新增弹窗组件的时候会通过watch来进⾏id判断我们要显否要清空表单的数
据.
以上就是我对computed和watch的理解。
㈥ 前端开发者面试必备的3个点
最近是招聘旺季，我也在负责我们公司的招聘，但是面试过程大部分前端面试者给我的感觉思维比较窄，以及陈述问题时候比较乱，整体给人感觉不是理想。下面是我作为一个面试官从三个维度给面试者建议和思考吧。
一.自我介绍
1.自我介绍，可以简单介绍你毕业什么学校，什么专业
2.出来负责的项目，每个项目自己充当的角色
3.每个项目使用前端技术+后端技术
简单大概的说出来就可以了，不要详细到你哪年进入公司，哪年离开公司，负责项目做什么的，说一大通。这个对我们面试官来说，想让你自我简单介绍，其实考察点有两方面：
A.面试者的表达能力和概括能力
B.面试者目前掌握什么技术，做过什么项目，在项目中的角色来初步判定这个人的能力
二.问题回答
在本人问他们做过项目中，自己感觉挑战最大的项目是什么，你在这个项目中做了什么，遇到什么问题，怎么解决这些问题的
1.有些面试者给我的答案直接说没有比较大的挑战;这个让我感觉这个人可能没有听懂我的问题，工作那么多年，难道没有一个项目可以拿来说的，那我拿什么来判定你的能力呢?难道凭你几句话，说我很牛逼的，没有什么困难难得到我?我就信任你了，伯乐寻找千里马都要知道几个千里马的特征吧。所以没有你也要在面试前准备好自己做过的项目和总结，在项目中自己做了什么，充当什么觉得。
2.有些面试者回答这个问题，在介绍项目的时候，很大概的说，还有就是一句话前端都是我做的，这些都是我设计的;这个让我感觉这个人也没有听懂我的意思，我在问你这个问题的时候，肯定是希望你详细介绍你的项目，这个项目使用者是谁，让我知道谁在使用这个项目;你负责哪些模块，哪些组件，那些模块实现什么业务逻辑，用到什么技术，这个能让我更加知道你项目的业务，才能从你描述中我知道这类的业务会遇到什么问题，以及你使用的技术是否合理，能让我更加判定你的能力，才能更好的提出问题，才能更好的面试下去。
3.回答问题的时候不要想到什么就答什么，要有陈述性，比如1,xxx;2.yyyyy;3.wwww的陈述，这样能让我知道你总结过，表达和陈述上比较清晰，思维好;想到什么答什么的，让我感觉思维可能比较乱，有可能我听懂了你的表述，但是让我感觉表达能力有些欠缺。
4.以及在你项目中遇到的问题，你要陈述问题，你是怎么思考的，而不是针对问题就直接说网络，google就解决了。我们大家都知道，遇到问题都会去网络，google.但在这问题的前提条件是问题是，架构上的问题，还是代码的bug问题，还是方案上的问题。你至少陈述清楚，是不是还有其他方案，在其他方案中，你为什么选择这个方案。这个能让知道你在面对问题的时候，你是否思考了其他的问题，想得越多，知道能体现出的思维比较发散，遇到问题可以有其他方式解决，而不是死磕一棵树上。
三.前端技能
前端技能在问到很多面试者的时候感觉自己都懂前端，其实他们只是懂使用js敲代码而已，很多前端知识，以及前端原理都不懂，只会使用的话，那么永远只会走来人家的后面。就那一个比喻来说吧，如果你只是一个会开车的司机，不会修车或者造车，那么如果哪天车出了毛病，你都不知道，到时候才去学习车的构造原理。或者你会说我直接给维修厂不就可以了，如果维修厂关门了呢怎么办。所以我们前端开发人员还是要脚踏实地，不要说我会使用vuejs，react前端框架，问你一个mvvm模式是什么，你都说不知道，怎么实现mvvm框架，在不使用别人开发mvvm框架，自己可以开发一个简单的mvvm框架?前端的开发者问问自己?以我个人的要求，前端开发者必须掌握
1.HTTP协议
2.前端安全
3.常用前端框架的三驾马车react,vuejs,angularjs目前比较流行的以及jquery(工具库)的使用
4.前端基础知识，跨域，es6新语法
5.Nodejs的开发，express，koa等常用框架
6.了解一些数据库知识
7.能理解封装业务组件和公用组件
8.前端性能优化
9.前后端分离
如果可以，能掌握更加深层次的知识点：
1.前端架构，设计模式
2.前端工程化开发，测试，打包，发布
3.自己实现前端架构代码以及开发工具
这些是我近期的一些总结，也希望能给最近正在找工作，最近准备开始转行前端的小伙伴们一个方向。
在面试前做好准备，找好自己的定位，成功收获高薪!
㈦ 前端需要哪些知识
前端前景是很不错的，像前端这样的专业还是一线城市比较好，师资力量跟得上、就业的薪资也是可观的，学习前端可以按照路线图的顺序，
0基础学习前端是没有问题的，关键是找到靠谱的前端培训机构，你可以深度了解机构的口碑情况，问问周围知道这家机构的人，除了口碑再了解机构的以下几方面：
1. 师资力量雄厚
要想有1+1>2的实际效果，很关键的一点是师资队伍，你接下来无论是找个工作还是工作中出任哪些的人物角色，都越来越爱你本身的技术专业前端技术性，也许的技术专业前端技术性则绝大多数来自你的技术专业前端教师，一个好的前端培训机构必须具备雄厚的师资力量。
2. 就业保障完善
实现1+1>2效果的关键在于能够为你提供良好的发展平台，即能够为你提供良好的就业保障，让学员能够学到实在实在的知识，并向前端学员提供一对一的就业指导，确保学员找到自己的心理工作。
3. 学费性价比高
一个好的前端培训机构肯定能给你带来1+1>2的效果，如果你在一个由专业的前端教师领导并由前端培训机构自己提供的平台上工作，你将获得比以往更多的投资。
希望你早日学有所成。
㈧ 47道基础的VueJS面试题(附答案)
1、什么是MVVM框架？它适用于哪些场景？
MVVM框架是一个 Model-View-View Model框架，其中 ViewModel连接模型Model）和视图（View）。
在数据操作比较多的场景中，MVVM框架更合适，有助于通过操作数据渲染页面。
2、active- class是哪个组件的属性？
它是 vue-router模块的 router-link组件的属性。
3、如何定义Vue- router的动态路由？
在静态路由名称前面添加冒号，例如，设置id动态路由参数，为路由对象的path属性设置/:id。
4、如何获取传过来的动态参数？
在组件中，使用$router对象的 params.id，即 $route.params.id 。
5、vue- router有哪几种导航钩子？
有3种。
第一种是全局导航钩子：router.beforeEach(to,from,next)。作用是跳转前进行判断拦截。
第二种是组件内的钩子。
第三种是单独路由独享组件。
6、mint-ui是什么？如何使用？
它是基于 Vue.js的前端组件库。用npm安装，然后通过 import导入样式和JavaScript代码。vue.use(mintUi)用于实现全局引入， import {Toast} from ' mint-ui'用于在单个组件局部引入。
7、V-model是什么？有什么作用？
v- model是 Vue. js中的一条指令，可以实现数据的双向绑定。
8、Vue.js中标签如何绑定事件？
绑定事件有两种方式。
第一种，通过v-on指令， 。
第二种，通过@语法糖， input@ click= doLog()/>。
9、vuex是什么？如何使用？在哪种功能场景中使用它？
vuex是针对 Vue. js框架实现的状态管理系统。
为了使用vuex，要引入 store，并注入Vue.js组件中，在组件内部即可通过$ ostore访问 store对象。
使用场景包括：在单页应用中，用于组件之间的通信，例如音乐播放、登录状态管理、加入购物车等。
10、如何实现自定义指令？它有哪些钩子函数？还有哪些钩子函数参数？
自定义指令包括以下两种。
它有如下钩子函数。
钩子函数的参数如下。
11、至少说出vue.js中的4种指令和它们的用法。
相关指令及其用法如下。
12、Vue-router是什么？它有哪些组件？
它是 Vue. js的路由插件。组件包括 router-link和 router-vIew。
13、导航钩子有哪些？它们有哪些参数？
导航钩子又称导航守卫，又分为全局钩子、单个路由独享钧子和组件级钧子。
全局钩子有 beforeEach、beforeResolve(Vue2.5.0新增的)、 afterEach。
单个路由独享钩子有 beforeEnter。
组件级钩子有 beforeRouteEnter、 beforeRouteUpdate(Vue2.2新增的) beforeRouteLeave。
它们有以下参数。
14、Vue.js的双向数据绑定原理是什么？
具体步骤如下。
（1）对需要观察的数据对象进行递归遍历，包括子属性对象的属性，设置set和get特性方法。当给这个对象的某个值赋值时，会触发绑定的set特性方法，于是就能监听到数据变化。
（4）MVVM是数据绑定的入口，整合了 Observer、 Compile和 Watcher三者，通过Observer来监听自己的 model数据变化，通过 Compile来解析编译模板指令，最终利用Watcher搭起 Observer和 Compile之间的通信桥梁，达到数据变化通知视图更新的效果。利用视图交互，变化更新数据 model变更的双向绑定效果。
15、请详细说明你对Vue.js生命周期的理解。
总共分为8个阶段，分别为 beforeCreate、created、beforeMount、 mounted、beforeUpdate、 updated、 beforeDestroyed、 destroyed。
当使用组件的kep- alive功能时，增加以下两个周期。
Vue2.5.0版本新增了一个周期钩子：ErrorCaptured，当捕获一个来自子孙组件的错误时调用。
16、请描述封装Vue组件的作用过程。
组件可以提升整个项目的开发效率，能够把页面抽象成多个相对独立的模块，解决了传统项目开发中效率低、难维护、复用性等问题。
使用Vue.extend方法创建一个组件，使用Vue.component方法注册组件。子组件需要数据，可以在 props中接收数据。而子组件修改妤数据后，若想把数据传递给父组件，可以采用emit方法。
17、你是怎样认识vuex的？
vuex可以理解为一种开发模式或框架。它是对 Vue. js框架数据层面的扩展。通过状态（数据源）集中管理驱动组件的变化。应用的状态集中放在 store中。改变状态的方式是提交 mutations，这是个同步的事务。异步逻辑应该封装在 action中。
18、Vue- loader是什么？它的用途有哪些？
它是解析.vue文件的一个加载器，可以将 template/js/style转换成 JavaScript模块。
用途是通过 vue-loader, JavaScript可以写 EMAScript 6语法， style样式可以应用scss或less, template可以添加jade语法等。
19、请说出vue.cli项目的src目录中每个文件夹和文件的用法。
assets文件夹存放静态资源；components存放组件；router定义路由相关的配置；view是视图；app. vue是一个应用主组件；main.js是入口文件。
20、在Vue.cli中怎样使用自定义组件？在使用过程中你遇到过哪些问题？
具体步骤如下。
（1）在 components目录中新建组件文件，脚本一定要导出暴露的接口。
（2）导入需要用到的页面（组件）。
（3）将导入的组件注入uejs的子组件的 components属性中。
（4）在 template的视图中使用自定义组件。
21、谈谈你对vue.js的 template编译的理解。
简而言之，就是首先转化成AST（ Abstract Syntax Tree，抽象语法树），即将源代码语法结构抽象成树状表现形式，然后通过 render函数进行渲染，并返回VNode（ Vue. js的虚拟DOM节点）。
详细步骤如下。
（1）通过 compile编译器把 template编译成AST, compile是 create Compiler的返回值， createCompiler用来创建编译器。另外， compile还负责合并 option。
（2）AST会经过 generate（将AST转化成 render funtion字符串的过程）得到 render函数， render的返回值是 VNode, VNode是 Vue.Js的虚拟DOM节点，里面有标签名子节点、文本等。
22、说一下Vue.js中的MVVM模式。
MVVM模式即 Model- View- ViewModel模式。
Vue.js是通过数据驱动的， Vue. js实例化对象将DOM和数据进行绑定，一旦绑定，和数据将保持同步，每当数据发生变化，DOM也会随着变化。
ViewModel是Vue.js的核心，它是 Vue.js的一个实例。Vue.js会针对某个HTML元素进行实例化，这个HTML元素可以是body，也可以是某个CSS选择器所指代的元素。
DOM Listeners和 Data Bindings是实现双向绑定的关键。DOM Listeners监听页面所有View层中的DOM元素，当发生变化时，Model层的数据随之变化。Data Bindings会监听 Model层的数据，当数据发生变化时，View层的DOM元素也随之变化。
23、v-show指令和v-if指令的区别是什么？
v-show与v-if都是条件渲染指令。不同的是，无论v-show的值为true或 false，元素都会存在于HTML页面中；而只有当v-if的值为true时，元素才会存在于HTML页面中。v-show指令是通过修改元素的 style属性值实现的。
24、如何让CSS只在当前组件中起作用？
在每一个Vue.js组件中都可以定义各自的CSS、 JavaScript代码。如果希望组件内写的CSS只对当前组件起作用，只需要在Style标签添加Scoped属性，即 。
25、如何创建vue.js组件？
在vue.js中，组件要先注册，然后才能使用。具体代码如下
26、如何实现路由嵌套？如何进行页面跳转？
路由嵌套会将其他组件渲染到该组件内，而不是使整个页面跳转到 router-view定义组件渲染的位置。要进行页面跳转，就要将页面渲染到根组件内，可做如下配置。
首先，实例化根组件，在根组件中定义组件渲染容器。然后，挂载路由，当切换路由时，将会切换整个页面。
27、ref属性有什么作用？
有时候，为了在组件内部可以直接访问组件内部的一些元素，可以定义该属性此时可以在组件内部通过this. $refs属性，更快捷地访问设置ref属性的元素。这是一个原生的DOM元素，要使用原生 DOM API操作它们，例如以下代码。
注意：在Ve2.0中，ref属性替代了1.0版本中v-el指令的功能。
28、Vue. js是什么？
Vue. js的目标是通过尽可能简单的API实现响应式的数据绑定的组件开发。
29、描述vue.js的一些特性。
Vue.js有以下持性。
（1）MVVM模式。
数据模型（ Model）发生改变，视图（View）监听到变化，也同步改变；视图（View）发生改变，数据模型（ Model）监听到改变，也同步改变。
使用MVVM模式有几大好处。
（2）组件化开发
（3）指令系统
（4）Vue2.0开始支持虚拟DOM。
但在Vue1.0中，操作的是真实DOM元素而不是虚拟DOM，虚拟DOM可以提升页面的渲染性能。
30、描述vue.js的特点。
Vue. js有以下特点。
31、在vue.js中如何绑定事件？
通过在v-on后跟事件名称=“事件回调函数( )”的语法绑定事件。事件回调函数的参数集合( )可有可无。如果存在参数集合( )，事件回调函数的参数需要主动传递，使用事件对象要传递 $event。当然，此时也可以传递一些其他自定义数据。如果没有参数集合，此时事件回调函数有一个默认参数，就是事件对象。事件回调函数要定义在组件的 methods属性中，作用域是 Vue. js实例化对象，因此在方法中，可以通过this使用 Vue. js中的数据以及方法，也可以通过@语法糖快速绑定事件，如@事件名称=“事件回调函数( )”。
32、请说明 组件的作用。
当 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
keep-alive>是一个抽象组件，它自身不会渲染一个DOM元素，也不会出现在父组件链中。
当在 内切换组件时，它的 activated和 deactivated这两个生命周期钧子函数将会执行。
33、axios是什么？如何使用它？
axios是在vue2.0中用来替换 vue-resource.js插件的一个模块，是一个请求后台的模。
用 npm install axios安装 axios。基于 EMAScript 6 的 EMAScript Mole规范，通过 import关键字将 axios导入，并添加到 Vue. js类的原型中。这样每个组件（包括vue.js实例化对象）都将继承该方法对象。它定义了get、post等方法，可以发送get或者post请求。在then方法中注册成功后的回调函数，通过箭头函数的作用域特征，可以直接访问组件实例化对象，存储返回的数据。
34、在 axios中，当调用 axios.post('api/user'）时进行的是什么操作？
当调用post方法表示在发送post异步请求。
35、sass是什么？如何在ue中安装和使用？
sass是一种CSS预编译语言安装和使用步骤如下。
（1）用npm安装加载程序（ sass-loader、 css-loader等加载程序)。
（2）在 webpack. config. js中配置sass加载程序。
（3）在组件的 style标签中加上lang属性，例如lang="scss"。
36、如何在 Vue. js中循环插入图片？
对“src”属性插值将导致404请求错误。应使用 v-bind:src格式代替。
代码如下：
㈨ 整理涵盖很全很广的前端知识点
HTML、CSS相关
html5新特性、语义化
浏览器渲染机制、重绘、重排
网页生成过程：
重排(也称回流): 当 DOM 的变化影响了元素的几何信息( DOM 对象的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。 触发：
重绘： 当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。 触发：
重排优化建议：
transform 不重绘，不回流 是因为 transform 属于合成属性，对合成属性进行 transition/animate 动画时，将会创建一个合成层。这使得动画元素在一个独立的层中进行渲染。当元素的内容没有发生改变，就没有必要进行重绘。浏览器会通过重新复合来创建动画帧。
css盒子模型
所有 HTML 元素可以看作盒子，在CSS中， "box model" 这一术语是用来设计和布局时使用。 CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
css样式优先级
!important>style>id>class
什么是BFC？BFC的布局规则是什么？如何创建BFC？BFC应用？
BFC 是 Block Formatting Context 的缩写，即块格式化上下文。 BFC 是CSS布局的一个概念，是一个环境，里面的元素不会影响外面的元素。 布局规则：Box是CSS布局的对象和基本单位，页面是由若干个Box组成的。元素的类型和display属性，决定了这个Box的类型。不同类型的Box会参与不同的 Formatting Context 。 创建：浮动元素 display：inline-block position:absolute 应用: 1.分属于不同的 BFC 时,可以防止 margin 重叠 2.清除内部浮动 3.自适应多栏布局
DOM、BOM对象
BOM（Browser Object Model） 是指浏览器对象模型，可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。 使 JavaScript 有能力与浏览器"对话"。 DOM （Document Object Model） 是指文档对象模型，通过它，可以访问 HTML 文档的所有元素。 DOM 是 W3C （万维网联盟）的标准。 DOM 定义了访问 HTML 和 XML 文档的标准： "W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。" W3C DOM 标准被分为 3 个不同的部分：
什么是 XML DOM ？ XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。 什么是 HTML DOM？ HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
JS相关
js数据类型、typeof、instanceof、类型转换
闭包(高频)
闭包是指有权访问另一个函数作用域中的变量的函数 ——《JavaScript高级程序设计》
当函数可以记住并访问所在的词法作用域时，就产生了闭包，
即使函数是在当前词法作用域之外执行 ——《你不知道的JavaScript》
原型、原型链(高频)
原型: 对象中固有的 __proto__ 属性，该属性指向对象的 prototype 原型属性。
原型链: 当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。原型链的尽头一般来说都是 Object.prototype 所以这就是我们新建的对象为什么能够使用 toString() 等方法的原因。
特点: JavaScript 对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。
this指向、new关键字
this 对象是是执行上下文中的一个属性，它指向最后一次调用这个方法的对象，在全局函数中， this 等于 window ，而当函数被作为某个对象调用时，this等于那个对象。 在实际开发中， this 的指向可以通过四种调用模式来判断。
new
作用域、作用域链、变量提升
继承(含es6)、多种继承方式
（1）第一种是以 原型链的方式来实现继承 ，但是这种实现方式存在的缺点是，在包含有引用类型的数据时，会被所有的实例对象所共享，容易造成修改的混乱。还有就是在创建子类型的时候不能向超类型传递参数。
（2）第二种方式是使用 借用构造函数 的方式，这种方式是通过在子类型的函数中调用超类型的构造函数来实现的，这一种方法解决了不能向超类型传递参数的缺点，但是它存在的一个问题就是无法实现函数方法的复用，并且超类型原型定义的方法子类型也没有办法访问到。
（3）第三种方式是 组合继承 ，组合继承是将原型链和借用构造函数组合起来使用的一种方式。通过借用构造函数的方式来实现类型的属性的继承，通过将子类型的原型设置为超类型的实例来实现方法的继承。这种方式解决了上面的两种模式单独使用时的问题，但是由于我们是以超类型的实例来作为子类型的原型，所以调用了两次超类的构造函数，造成了子类型的原型中多了很多不必要的属性。
（4）第四种方式是 原型式继承 ，原型式继承的主要思路就是基于已有的对象来创建新的对象，实现的原理是，向函数中传入一个对象，然后返回一个以这个对象为原型的对象。这种继承的思路主要不是为了实现创造一种新的类型，只是对某个对象实现一种简单继承，ES5 中定义的 Object.create() 方法就是原型式继承的实现。缺点与原型链方式相同。
（5）第五种方式是 寄生式继承 ，寄生式继承的思路是创建一个用于封装继承过程的函数，通过传入一个对象，然后复制一个对象的副本，然后对象进行扩展，最后返回这个对象。这个扩展的过程就可以理解是一种继承。这种继承的优点就是对一个简单对象实现继承，如果这个对象不是我们的自定义类型时。缺点是没有办法实现函数的复用。
（6）第六种方式是 寄生式组合继承 ，组合继承的缺点就是使用超类型的实例做为子类型的原型，导致添加了不必要的原型属性。寄生式组合继承的方式是使用超类型的原型的副本来作为子类型的原型，这样就避免了创建不必要的属性。
EventLoop
JS 是单线程的，为了防止一个函数执行时间过长阻塞后面的代码，所以会先将同步代码压入执行栈中，依次执行，将异步代码推入异步队列，异步队列又分为宏任务队列和微任务队列，因为宏任务队列的执行时间较长，所以微任务队列要优先于宏任务队列。微任务队列的代表就是， Promise.then ， MutationObserver ，宏任务的话就是 setImmediate setTimeout setInterval
原生ajax
ajax 是一种异步通信的方法,从服务端获取数据,达到局部刷新页面的效果。 过程：
事件冒泡、捕获(委托)
event.stopPropagation() 或者 ie下的方法 event.cancelBubble = true; //阻止事件冒泡
ES6
Vue
简述MVVM
MVVM 是 Model-View-ViewModel 缩写，也就是把 MVC 中的 Controller 演变成 ViewModel。Model 层代表数据模型， View 代表UI组件， ViewModel 是 View 和 Model 层的桥梁，数据会绑定到 viewModel 层并自动将数据渲染到页面中，视图变化的时候会通知 viewModel 层更新数据。
谈谈对vue生命周期的理解？
每个 Vue 实例在创建时都会经过一系列的初始化过程， vue 的生命周期钩子，就是说在达到某一阶段或条件时去触发的函数，目的就是为了完成一些动作或者事件
computed与watch
watch 属性监听 是一个对象，键是需要观察的属性，值是对应回调函数，主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作,监听属性的变化，需要在数据变化时执行异步或开销较大的操作时使用
computed 计算属性 属性的结果会被缓存，当 computed 中的函数所依赖的属性没有发生改变的时候，那么调用当前函数的时候结果会从缓存中读取。除非依赖的响应式属性变化时才会重新计算，主要当做属性来使用 computed 中的函数必须用 return 返回最终的结果 computed 更高效，优先使用
使用场景 computed ：当一个属性受多个属性影响的时候使用，例：购物车商品结算功能 watch ：当一条数据影响多条数据的时候使用，例：搜索数据
v-for中key的作用
vue组件的通信方式
父子组件通信
父->子 props ，子->父 $on、$emit` 获取父子组件实例 parent、 parent 、children Ref 获取实例的方式调用组件的属性或者方法 Provide、inject` 官方不推荐使用，但是写组件库时很常用
兄弟组件通信
Event Bus 实现跨组件通信 Vue.prototype.$bus = new Vue() Vuex
跨级组件通信
$attrs、$listeners Provide、inject
常用指令
双向绑定实现原理
当一个 Vue 实例创建时，Vue会遍历data选项的属性，用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher重新计算，从而致使它关联的组件得以更新。
v-model的实现以及它的实现原理吗？
nextTick的实现
vnode的理解，compiler和patch的过程
new Vue后整个的流程
思考：为什么先注入再提供呢？？
答：1、首先来自祖辈的数据要和当前实例的data,等判重，相结合，所以注入数据的initInjections一定要在 InitState 的上面。2. 从上面注入进来的东西在当前组件中转了一下又提供给后代了，所以注入数据也一定要在上面。
vm.[Math Processing Error]mount(vm.mount(vm.options.el) ：挂载实例。
keep-alive的实现
作用：实现组件缓存
钩子函数：
原理： Vue.js 内部将 DOM 节点抽象成了一个个的 VNode 节点， keep-alive 组件的缓存也是基于 VNode 节点的而不是直接存储 DOM 结构。它将满足条件 （pruneCache与pruneCache） 的组件在 cache 对象中缓存起来，在需要重新渲染的时候再将 vnode 节点从 cache 对象中取出并渲染。
配置属性：
include 字符串或正则表达式。只有名称匹配的组件会被缓存
exclude 字符串或正则表达式。任何名称匹配的组件都不会被缓存
max 数字、最多可以缓存多少组件实例
vuex、vue-router实现原理
vuex 是一个专门为vue.js应用程序开发的状态管理库。 核心概念：
你怎么理解Vue中的diff算法?
在js中,渲染真实 DOM 的开销是非常大的, 比如我们修改了某个数据,如果直接渲染到真实 DOM , 会引起整个 dom 树的重绘和重排。那么有没有可能实现只更新我们修改的那一小块dom而不要更新整个 dom 呢？此时我们就需要先根据真实 dom 生成虚拟 dom ， 当虚拟 dom 某个节点的数据改变后会生成有一个新的 Vnode , 然后新的 Vnode 和旧的 Vnode 作比较，发现有不一样的地方就直接修改在真实DOM上，然后使旧的 Vnode 的值为新的 Vnode 。
diff 的过程就是调用 patch 函数，比较新旧节点，一边比较一边给真实的 DOM 打补丁。在采取 diff 算法比较新旧节点的时候，比较只会在同层级进行。 在 patch 方法中，首先进行树级别的比较 new Vnode 不存在就删除 old Vnode old Vnode 不存在就增加新的 Vnode 都存在就执行diff更新 当确定需要执行diff算法时，比较两个 Vnode ，包括三种类型操作：属性更新，文本更新，子节点更新 新老节点均有子节点，则对子节点进行 diff 操作，调用 updatechidren 如果老节点没有子节点而新节点有子节点，先清空老节点的文本内容，然后为其新增子节点 如果新节点没有子节点，而老节点有子节点的时候，则移除该节点的所有子节点 老新老节点都没有子节点的时候，进行文本的替换
updateChildren 将 Vnode 的子节点Vch和oldVnode的子节点oldCh提取出来。 oldCh和vCh 各有两个头尾的变量 StartIdx和EndIdx ，它们的2个变量相互比较，一共有4种比较方式。如果4种比较都没匹配，如果设置了 key ，就会用 key 进行比较，在比较的过程中，变量会往中间靠，一旦 StartIdx>EndIdx 表明 oldCh和vCh 至少有一个已经遍历完了，就会结束比较。
你都做过哪些Vue的性能优化？
你知道Vue3有哪些新特性吗？它们会带来什么影响？
更小巧、更快速 支持自定义渲染器 支持摇树优化：一种在打包时去除无用代码的优化手段 支持Fragments和跨组件渲染
模板语法99%保持不变 原生支持基于class的组件，并且无需借助任何编译及各种stage阶段的特性 在设计时也考虑TypeScript的类型推断特性 重写虚拟DOM 可以期待更多的编译时提示来减少运行时的开销 优化插槽生成 可以单独渲染父组件和子组件 静态树提升 降低渲染成本 基于Proxy的观察者机制 节省内存开销
检测机制 更加全面、精准、高效,更具可调试式的响应跟踪
实现双向绑定 Proxy 与 Object.defineProperty 相比优劣如何?
React
1、react中key的作用，有key没key有什么区别，比较同一层级节点什么意思？
2、你对虚拟dom和diff算法的理解，实现render函数
虚拟DOM 本质上是 JavaScript 对象,是对 真实DOM 的抽象表现。 状态变更时，记录新树和旧树的差异 最后把差异更新到真正的 dom 中 render函数:
3、React组件之间通信方式？
Context 提供了一个无需为每层组件手动添加 props ，就能在组件树间进行数据传递的方法.如果你只是想避免层层传递一些属性，组件组合（ component composition ）有时候是一个比 context 更好的解决方案。 5. 组件组合缺点：会使高层组件变得复杂
4、如何解析jsx
5、生命周期都有哪几种，分别是在什么阶段做哪些事情？为什么要废弃一些生命周期？
componentWillMount、componentWillReceiveProps、componentWillUpdate在16版本被废弃，在17版本将被删除，需要使用UNSAVE_前缀使用，目的是向下兼容。
6、关于react的优化方法
使用return null而不是CSS的display:none来控制节点的显示隐藏。保证同一时间页面的DOM节点尽可能的少。
不要使用数组下标作为key 利用 shouldComponentUpdate 和 PureComponent 避免过多 render function ; render 里面尽量减少新建变量和bind函数，传递参数是尽量减少传递参数的数量。 尽量将 props 和 state 扁平化，只传递 component 需要的 props （传得太多，或者层次传得太深，都会加重 shouldComponentUpdate 里面的数据比较负担），慎将 component 当作 props 传入
使用 babel-plugin-import 优化业务组件的引入，实现按需加载 使用 SplitChunksPlugin 拆分公共代码 使用动态 import ，懒加载 React 组件
7、绑定this的几种方式
8、对fiber的理解
9、setState是同步还是异步的
10、Rex、React-Rex
Rex的实现流程
用户页面行为触发一个 Action ，然后 Store 调用 Recer ，并且传入两个参数：当前 State 和收到的 Action 。 Recer 会返回新的 State 。每当 state 更新之后， view 会根据 state 触发重新渲染。
React-Rex:
Provider ：从最外部封装了整个应用，并向 connect 模块传递 store 。 Connect ：
11、对高阶组件的理解
高阶组件是参数为组件，返回值为新组件的函数。 HOC 是纯函数，没有副作用。 HOC 在 React 的第三方库中很常见，例如 Rex 的 connect 组件。
高阶组件的作用：
12、可以用哪些方式创建 React 组件？
React.createClass()、ES6 class 和无状态函数
13、 React 元素与组件的区别？
组件是由元素构成的。元素数据结构是普通对象，而组件数据结构是类或纯函数。
Vue与React对比？
数据流：
react 主张函数式编程，所以推崇纯组件，数据不可变，单向数据流，
vue 的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom。
监听数据变化实现原理 ：
组件通信的区别：jsx和.vue模板。
性能优化
vuex 和 rex 之间的区别？
从实现原理上来说，最大的区别是两点：
Rex 使用的是不可变数据，而 Vuex 的数据是可变的。 Rex 每次都是用新的 state 替换旧的 state ，而 Vuex 是直接修改
Rex 在检测数据变化的时候，是通过 diff 的方式比较差异的，而 Vuex 其实和Vue的原理一样，是通过 getter/setter 来比较的(如果看 Vuex 源码会知道，其实他内部直接创建一个 Vue 实例用来跟踪数据变化)
浏览器从输入url到渲染页面，发生了什么？
网络安全、HTTP协议
TCP UDP 区别
Http和Https区别（高频）
GET和POST区别（高频）
理解xss，csrf，ddos攻击原理以及避免方式
XSS ( Cross-Site Scripting ， 跨站脚本攻击 )是一种代码注入攻击。攻击者在目标网站上注入恶意代码，当被攻击者登陆网站时就会执行这些恶意代码，这些脚本可以读取 cookie，session tokens ，或者其它敏感的网站信息，对用户进行钓鱼欺诈，甚至发起蠕虫攻击等。
CSRF （ Cross-site request forgery ） 跨站请求伪造 ：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。
XSS避免方式：
CSRF 避免方式：
DDoS 又叫分布式拒绝服务，全称 Distributed Denial of Service ，其原理就是利用大量的请求造成资源过载，导致服务不可用。
㈩ 前端面试要点
想要通过前端面试顺利进入一线大厂成就高薪前端梦。那么首先，我们得知道前端面试中，社招和校招究竟有啥区别？
对于前端开发来说，如果说社招更看重对前端技术体系的深入理解，以及解决问题的能力话，那校招更看重的其实是基本功和学习能力（或者说是潜力）。
但其实，无论是社招还是校招，面试的时候都会问到一些曾经操作过的项目，尤其是大厂，或者热门高薪部门，面试官除必问的技术经验外，也会对技术深度进行一个基础的考核，那在这种情况下如何hold住大厂面试呢？
前端面试三要素：简历、个人介绍、技术能力。下面，就来分别聊一聊。
1、简历筛选关：
HR一般会去看简历中所提的技术栈是否匹配，怎么看呢？我们可以抓住简历中的技术名词，一般来说如果一点技术名词都没有提到，那么大概有以下几种可能：很水、很牛但概率很小、不会写简历。所以，一部分人可能会因为简历的问题没有了面试机会，这点是需要非常注意的。
2、个人介绍关：
通过了简历筛选阶段，就真正到了面试环节。这时候一定要准备好一段最多3分钟的个人介绍。请注意，最多3分钟！言简意赅的说明自己的工作时间，擅长技术栈和自己的工作预期。
3、项目经验表达：
对前端开发学习者而言，JS并不陌生，但大厂的JS面试题却总是显得很“陌生”，怎么样能够真正做到深入理解与高级应用？这不仅是面试过程中对前端求职者的要求，也是大多数前端开发者的痛点。
大厂面试中，面试官除了关注你的项目经验外，还往往喜欢和面试者深入探讨前端某些技术领域成体系的前端知识。比如：模块化、异步解决方案、网络、框架及原理、线程等，但在与面试官的正面battle中，求职者总会败下阵来。
所以，建议大家在Web前端面试前一定要注重这三个方面的内容。注重了这些想找找到一份适合的Web前端开发工作并不是难事。