A. 有哪些经典的前端开发面试题及答案解析
行元素与块元素的区别；
如何清除浮动；
定位方式当中，absolute与fixed、relative的区别；
事件的兼容问题；
Ajax是什么；
如何优化你的页面；
响应式布局是什么等等。
经典的前端面试题至少有近百道，在这里也没办法全部给你列出来，你可以看看这个（小-程序），里面有好几百道面试真题，也有比较好的答案解析。
B. 前端面试题2021（JS篇（上））
（水仙花数也被称为超完全数字不变数、自恋数、自幂数、阿姆斯特朗数。水仙花数是指一个3位数，它的每个位上的数字的3次幂之和等于它本身 例如： 1~3 + 5~3 + 3~3 =153）
(质数就是在大于1的自然数中，除了1和它本身以外不在有其他因数的自然数)
a:11,b:10
A [] B [""] C [undefined] D [null]
A ['false'] B [false] C[0] D[]
A null B undefined C “hello” D“world”
A "llowo" B "llow" C "llo" D null
A "llowo" B "llow" C "llo" D null
A getYear（）
B getMonth（）
C getDay（）
DgetDate（）
A 基于对象
B 移动端优先
C 事件驱动
D 跨平台
A String
B Float
C Number
D Null
A 任意单个字符
B 任意单个字母
C 任意单个字母、数字、下划线
D 任意单个字母、数学、下划线、$符号
A <javascript>
B <script>
C <scripting>
D <js>
A var s = 'heloe'
B var n = 20
C var x = document.getElementsByTagName('box')
D var y = document.querySelectorAll('ul li')
A document.createElement
B document.createTextNode
C document.getElementById
B document.querySelector
A ele.innerText
B ele.innerHTML
C ele.textContent
D ele.htmlContent
插入排序的算法描述的是一种简单直观的排序算法，它的工作原理是通过构建有序序列，对于未排序的数据，在已排序序列中从后向前扫描，找到对应位置并插入
A.对数组里数据的排序可以用sort函数，如果排序效果非预期，可以给sort函数加一个排序的参数
B.reverse用于对数组数据的倒序排列
C.向数组的最后位置加一个新元素，可以用pop方法
D.unshift方法用于向数组删除第一个元素
A.window.status = "已经选中该文本框"
B.document.status = '已经选中该文本框'
C.window.screen = '已经选中该文本框'
D.document.screen = '已经选中该文本框'
A <input type="button" value="new" onclick="open('new.html','_blank')" />
B. <input type="button" value="new" onclick="window.location = 'new.html'" />
C.<input type="button" value="new " onclick = "location.assign('new.html)">
D. <form target = "_blank" action="new.html">
<input type="submit" value="new" />
</form>
A.<script type="text/javascript">document.write(<h1>hello</h1>)</script>
B.<script type="text/javascript">document.write("<h1>hello</h1>")</script>
C.<script type="text/javascript"><h1>hello</h1></script>
D.<h1><script type="text/javascript">document.write("hello")</script></h1>
以下说法中正确的是（AD）
A.在页面的第二个文本框中输入内容后，当目标离开第二个文本框时，第一个文本框的内容不变
B.在页面的第一个文本框中输入内容后，当鼠标离开第一个文本框时，将在第二个文本框中复制第一个文本框的内容
C.在页面的第二个文本框中输入内容后，当鼠标离开第二个文本框时候，将在第一个文本框中复制第二个文本框的内容
D.在页面的第一个文本框中输入内容后，当鼠标离开第一个文本框时，第二个文本框的内容不变
C. 高级前端面试题目大全(三)
解析： 第 41题
比如 sleep(1000) 意味着等待1000毫秒，可从 Promise、Generator、Async/Await 等角度实现
解析： 第 42 题
解析： 第 43 题
1、客户端使用https的url访问web服务器,要求与服务器建立ssl连接
2、web服务器收到客户端请求后, 会将网站的证书(包含公钥)传送一份给客户端
3、客户端收到网站证书后会检查证书的颁发机构以及过期时间, 如果没有问题就随机产生一个秘钥
4、客户端利用公钥将会话秘钥加密, 并传送给服务端, 服务端利用自己的私钥解密出会话秘钥
5、之后服务器与客户端使用秘钥加密传输
解析： 第 44 题
解析： 第 45 题
1.使用第一次push，obj对象的push方法设置 obj[2]=1;obj.length+=1
2.使用第二次push，obj对象的push方法设置 obj[3]=2;obj.length+=1
3.使用console.log输出的时候，因为obj具有 length 属性和 splice 方法，故将其作为数组进行打印
4.打印时因为数组未设置下标为 0 1 处的值，故打印为empty，主动 obj[0] 获取为 undefined
解析： 第 46 题
解析： 第 47 题
1、Function.prototype.apply和Function.prototype.call 的作用是一样的，区别在于传入参数的不同；
2、第一个参数都是，指定函数体内this的指向；
3、第二个参数开始不同，apply是传入带下标的集合，数组或者类数组，apply把它传给函数作为参数，call从第二个开始传入的参数是不固定的，都会传给函数作为参数。
4、call比apply的性能要好，平常可以多用call, call传入参数的格式正是内部所需要的格式
解析： 第 48 题
解析： 第 49 题
解析： 第 50 题
为什么在 Vue3.0 采用了 Proxy，抛弃了 Object.defineProperty？
解析： 第 51 题
解析： 第 52 题
解析： 第 53 题
解析： 第 54 题
如下：{1:222, 2:123, 5:888}，请把数据处理为如下结构：[222, 123, null, null, 888, null, null, null, null, null, null, null]。
解析： 第 55 题
解析： 第 56 题
解析： 第 57 题
解析： 第 58 题
解析： 第 59 题
解析： 第 60 题
解析： 第 61 题
解析： 第 62 题
解析： 第 63 题
解析： 第 64 题
解析： 第 65 题
解析： 第 66 题
随机生成一个长度为 10 的整数类型的数组，例如 [2, 10, 3, 4, 5, 11, 10, 11, 20] ，将其排列成一个新数组，要求新数组形式如下，例如 [[2, 3, 4, 5], [10, 11], [20]] 。
解析： 第 67 题
解析： 第 68 题
解析： 第 69 题
解析： 第 70 题
解析： 第 71 题
[图片上传失败...(image-2eeb30-1575446538468)]
<figcaption></figcaption>
解析： 第 72 题
解析： 第 73 题
解析： 第 74 题
解析： 第 75 题
解析： 第 76 题
示例 1：
示例 2：
解析： 第 77 题
解析： 第 78 题
解析： 第 79 题
解析： 第 80 题
解析： 第 81 题
解析： 第 82 题
解析： 第 83 题
习题： https://blog.csdn.net/qq_37024887/article/details/106784068
解析： 第 84 题
解析： 第 85 题
给定一个整数数组和一个目标值，找出数组中和为目标值的两个数。
你可以假设每个输入只对应一种答案，且同样的元素不能被重复利用。
示例：
解析： 第 86 题
解析： 第 87 题
以下数据结构中，id 代表部门编号，name 是部门名称，parentId 是父部门编号，为 0 代表一级部门，现在要求实现一个 convert 方法，把原始 list 转换成树形结构，parentId 为多少就挂载在该 id 的属性 children 数组下，结构如下：
解析： 第 88 题
解析： 第 89 题
[图片上传失败...(image-aea64e-1575446538470)]
解析： 第 90 题
解析： 第 91 题
[图片上传失败...(image-21d53f-1575446538470)]
解析： 第 92 题
示例 1：
中位数是 2.0
示例 2：
中位数是(2 + 3) / 2 = 2.5
解析： 第 93 题
解析： 第 94 题
解析： 第 95 题
解析： 第 96 题
解析： 第 97 题
解析： 第 98 题
解析： 第 99 题
解析：[第 100 题]( https://github.com/Advanced-Frontend/Daily-
D. 腾讯WEB前端笔试题和面试题答案
腾讯WEB前端笔试题和面试题答案
能进入腾讯工作是多少人的梦想，下面我为大家搜集的一篇“腾讯WEB前端笔试题和面试题答案”，供大家参考借鉴，希望可以帮助到有需要的朋友!
一、 耐心填一填!(每空4分，共24分)
1. 为span设置类a与b,应编写HTML代码_________。
2. 设置CSS属性clear的值为_both___________时可清除左右两边浮动。
3. ____li________标签必须直接嵌套于ul、ol中。
4. CSS属性_____margin_______可为元素设置外补丁。
5. 设置CSS属性float的值为___none_________时可取消元素的浮动。
6. 文字居中的CSS代码是____text-align:center________。
二、 精心选一选!(每题4分，共16分)
1. 下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度( C )
A. display:inline B. display:none C. display:block D. display:inheric
2. 选出你认为最合理的定义标题的方法( C )
A. 文章标题
B.
文章标题
C.
文章标题
D. 文章标题
3. br标签在XHTML中语义为( A )
A.换行 B.强调 C.段落 D.标题
4. 不换行必须设置( AC )
A.word-break B.letter-spacing C.white-space D.word-spacing
5. 在使用table表现数据时，有时候表现出来的'会比自己实际设置的宽度要宽，为此需要设置下面哪些属性值( AD )
A. cellpadding=”0″ B. padding:0 C. margin:0 D. cellspacing=”0″
三、判断对或错!(每题4分，共24分)
1. CSS属性font-style 用于设置字体的粗细。 ( × )
2. CSS属性overflow用于设置元素超过宽度时是否隐藏或显示滚动条。 ( √ )
3. 在不涉及样式情况下,页面元素的优先显示与结构摆放顺序无关。 ( × )
4. 在不涉及样式情况下,页面元素的优先显示与标签选用无关。 ( √ )
5. display:inline兼容所有的浏览器。 ( √ )
6. input属于窗体元素,层级显示比flash、其它元素都高。 ( × )
;E. 你遇到的前端面试题都有什么
大家好，我是王我。
随着春节的结束，各个行业也普遍开始了上班的节奏， 不过本人17号才上班。为什么？因为长得帅的都上班比较晚。 当然，每到新年结束，又迎来了一批招聘者与面试者，我来说说作为一年工作经验应该知道的面试题。
HTML篇
1.doctype是什么？有哪些类型？
2.input有哪些新类型？简要说明其8用法。
3.HTML5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？
4.bootstrap响应式的原理是什么？
5.多移动终端页面适配是如何实现的？
CSS篇
1.如何实现两列布局，左边自适应，右边固定宽度？
2.用CSS画一个三角形
3.CSS实现字体大写
4.display有哪些常用的属性值？分别是什么意思？
5.position为absolute，relative，fixed的定点位置
6.用三种方法清除浮动
7.请介绍一下margin塌陷问题
js篇
1.什么是事件冒泡和捕获？如何阻止事件冒泡？(分别用原生和jquery实现)
2.js创建对象，至少使用三种方法
3.简述一下事件穿透以及解决办法
4.用三种方式判断变量类型是否是数组
5.如何实现对象的拷贝？
6.什么是闭包？闭包的优缺点。
7.简述一下ajax请求的过程。
8.简述一下new一个人构造函数的人过程。
9.为什么会有跨域？是怎么解决跨域问题的？简述一下原理。
10.js原始数据类型有哪些？
11.学一个函数，判断一个变量是否是字符串
12.typeof有哪些结果？
13.剪头函数和普通函数有什么区别？
14.请用三种方法实现数组去重
15.href和src有什么区别？
jquery篇
1.attr()和prop()有什么区别？
2.on和bind有什么区别？js动态添加的dom元素是通过on还是bind？
3.touch和click有什么区别？
4.window.onload和jquery的ready有什么区别？
vue篇
1.简述一下vue的生命周期及其特点
2.vue双向绑定的原理是什么？
3.vue的特点有哪些？和jquery有什么区别？
4.父子组件之间传递数据的方法
5.子组件如何共享数据？
6.一般有什么工具进行数据交互？
7.webpack的原理是什么？
8.简述一下$nextTick的用法
浏览器篇
1.cookie、sessionStorage、localStorage的区别是什么？
2.有用过浏览器缓存吗？简述一下基本的缓存机制
网络篇
1.http和https之间的区别
2.从服务器的安全考虑，是使用get请求还是post请求？
3.URL请求的过程有哪些？
项目经验篇
1.项目中遇到的最大挑战以及解决办法
2.常见的网页优化有哪些？
作为一个面试一年以内工作经验的前端程序员来说，以上的问题能够倒答如流月薪6k应该不成问题啦。这些面试题也是我在很多面试中感觉经常被问到的题目。
希望大家年后找工作能够顺顺利利， 千万不要跟我一样哦，只有帅气就一无所有了。
大家好，我是王我，中国最帅的前端程序员。
前几次都是各种培训公司，各种忽悠就不提了，说说后面4次面试的经历。
第一次是面一个小公司，不过他们好像没有厉害的前端，来面我的是个后端，一来没有问我关于js的知识，直接问我以前做过什么，有没有经验，我本人不会吹牛，简历也没怎么包装，就是自己把自学的知识和做的几个小demo弄在上面，也用github挂在页面上了，不过他根本不点开看，也不问，问我会不会vue，我当时对框架还不了解，他就说他们需要能直接上手开始写的，所以我第一个就直接挂了。
第二次面试是一个国企，这个问了很多问题，都很基础，js数据类型，数组操作，事件，大概就是高程的前面几章看看就差不多都能答到，然后因为他们主要用jq，所以问了很多jq的操作，关于节点的，动画的，我看锋利的jq大概看了3遍，也练过多次，所以我答的很熟。然后问了些布局方面的，bootstrap我了解过，又看过css3，所以这方面也没啥问题，最后在现场做了个题目，主要就是布局然后通过ajax呈现数据。后面听介绍我面试的说面试官比较满意，说我jq很熟，一面就过了。可惜后面电话面试不知怎么回事可能表现的不够自信，虽然没问技术，但是我没啥自信，把没项目经验什么的也不知怎么就一五一十交代了，估计因为这个挂掉了。
第三次没问问题，直接就是一套题开做，我在那做了一个多小时。题目就是按照要求一步一步做一个页面出来，我也搞忘了我当时卡在哪个地方了，坐在那得时候就是做不出来，没有设计图，要根据他的描述自己找个设计图然后做，我第一次遇到这个有点懵，虽然当时没做出来，不过回来我自己花了几个小时把它做了。所以这个也是凉了。
第四个问的比较多，数据类型，数组操作，跨域，ajax，闭包，原型链，继承，深拷贝，浅拷贝，模块amd cmd，基本都是问的js。然后问了html5的新特性 css3 的新特性，遇到过什么浏览器的兼容性问题，怎么解决的，以后想往什么方面发展。这个时候我已经会点vue了，照着做了个小demo，不过后来知道公司用的angularjs，面试官也没看我做的，问也没问。。以前听网上说要带上自己的项目去面试感觉没起多大效果。
最后总结下如果面的比较初级的岗位，应该主要问js，原型链，继承，闭包，深浅拷贝，ajax，跨域，然后js的基础知识，对了还有apply和call也问了，html5的新特性了解下就行。主要就是看你js掌握的程度，如果稍微要求高一点的，暂时还没面过，等以后面过在来回答
1. cookie session 的用途和区别，以及有效期
1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，应当使用COOKIE。
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
2. vue的数据绑定原理，mvvm与mvc的区别
MVVM：
m:model数据模型层 v:view视图层 vm:ViewModel
vue中采用的是mvvm模式，这是从mvc衍生过来的
MVVM让视图与viewmodel直接的关系特别的紧密，就是为了解决mvc反馈不及时的问题
图片说明一下：
说到MVVM就要说一下双向绑定和数据劫持的原理，
MVC：
m:model数据模型层 v:view视图层 c:controller控制器
原理： c层需要控制model层的数据在view层进行显示
MVC两种方式，图片说明：
总结：
mvvm与mvc最大的区别：
MVVM实现了view与model的自动同步，也就是model属性改变的时候， 我们不需要再自己手动操作dom元素去改变view的显示，而是改变属性后该属性对应的view层会自动改变。
不懂得可以复制链接查看：
https://www.pianshen.com/article/3716256399/
3. storage 的区别 sessionStorage localStorage
localStorage 的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性
sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的
有一个文本框 通过v-bind绑定了value属性 值为myname 是我们在vue实例中定义的属性
传统我们获取文本框值方法 可能通过getElementById找到文本框 然后获取其value属性
但是vue中直接通过v-bind绑定了value属性 所以不需要像之前那样获取值
所以在后面的按钮中获取name值 直接获取vue实例对象data里面的myname属性即可
【数据为尊 ----数据映射到浏览器 如果数据v-model后修改（肯定input）然后到数据在有数据映射到浏览器页面 ----映射关系统称】
缓存路由组件
使用的是vue的一个组件，参考vue的官方文档
使用这个东西可以保证我们在切换组件的时候，原来显示的组件不被销毁
-----【保障组件的数据不会被切换路由而销毁数据】
Home是对应的组件对象的名字，不是路由的名字
6.多维数组拍平
数组拍平也称数组扁平化，就是将数组里面的数组打开，最后合并为一个数组
一红六种方法吧……
了解的请看： https://www.cnblogs.com/guan-shan/p/10165737.html
7.跨域的原因 解决方案
跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。
这样就可以说同源策略----协议---端口---域名
原生的src和href可以解决跨域
代理可以解决
请求头也可以携带浏览器提示的也可以解决
一般都是后端解决跨域问题
【别的需要了解看下方链接】
https://blog.csdn.net/qq_41604383/article/details/100770100
8.uniApp兼容问题§ 如果你使用cli创建项目（即项目根目录是package.json），不管用什么ide，即便是用HBuilderX，切记cli项目的编译器是在项目下的，HBuilderX不管怎么升级都不会影响编译器版本。你需要手动npm update来升级编译器。以及如果你想要安装less、scss等预编译器，也需要自己npm安装在项目下，而不是在HBuilderX的插件管理里安装。
§ 如果你使用离线打包，请注意HBuilderX升级后，真机运行基座和云打包对应引擎跟随HBuilderX升级，而你的sdk需要手动升级。sdk的版本升级一般滞后HBuilderX正式版升级一两天。
§ 如果你使用自定义基座，之前制作的自定义基座是不会跟随HBuilderX升级的，升级HBuilderX后你应该重新制作新版自定义基座。
§ 如果你使用wgt升级，新版HBuilderX编译的wgt，运行到之前的runtime上，一定要先测试好，看有没有兼容性问题。如果有问题，就不要wgt升级，整包升级。
§ 考虑到向下兼容，uni-app编译器在升级为新的自定义组件模式后，同时保留了对老编译模式的向下兼容。
在HBuilderX alpha版中，App端一定会使用新编译器，不理会manifest配置。
在HBuilderX 正式版中，新创建的项目会使用新编译器，老项目不会强制使用，而是开发者自己在manifest里配置开启。
§ 如果你使用其他ide开发uni-app，会经常因为拼错单词而运行失败，因为经过webpack编译一道，很多错误反应的不够直观，排错时间很长，不如从开始就依赖有良好提示的HBuilderX，避免敲错单词。
§ 云打包的引擎版本说明
HBuilderX Alpha，只有1套云打包机，不管你的HBuilderX alpha版本多少，对应的打包机一定是最新的alpha版的客户端引擎。
HBuilderX正式版，有2套打包机，一个是最新正式版，一个是次新正式版。
中间的紧急更新版本没有独立打包机。
举个例子：
HBuilderX 有1.8.0、1.8.1、1.8.2、1.9.0、1.9.1这几个正式版。
那么当前可用的打包机有1.9.1和1.8.2这2台。（即每个大版本的最后一个版本）
除了这2个HBuilderX版本外，其他版本的云打包都指向最新的1.9.1版对应的打包机。（即只保留2个大版本的云打包机）
【详情请看】
https://ask.dcloud.net.cn/article/35845
一、HTML
HTML书写规范
H5新增标签
HTML渲染过程
二、CSS
css盒子模型概念
css弹性布局概念
三、JavaScript
事件模型
DOM2级事件模型
闭包
原型链
四、移动Web开发
常见的布局方案
移动端前端常见的触摸相关事件touch、tap、swipe等整理
移动端前端手势事件
移动端页面渲染优化
GPU渲染
GPU核心渲染过程
五、调试
常用的调试工具
Chrome控制台调试js使用
移动端测试
六、HTTP网络知识
常见的HTTP状态码
不同请求类型的区别
WEB缓存方案
——————————
牛客网（www.nowcoder.com）
- 专业IT笔试面试备考平台
- 最全C++JAVA前端等互联网技术求职题库
- 全面提升IT编程能力
- 程序员交友圣地
分享了一些Web前端的面试题，限时一小时，你看看自己能够答出多少道！
放心，这些面试题都是一些非常基础的知识，只要你在平时认真听课、学习了，那么这些面试题肯定不会难道你。
建议：虽然没有人监督你，但还是希望你不要去寻找答案，脱离网络，拿起纸笔，你试一下自己究竟能够答出个什么水平！有没有真本领？答案尽在这些面试题里！那么，你准备好了吗？OK！计时开始！
一、HTML常见题目01、Doctype作用？严格模式与混杂模式如何区分？它们有何意义？
02、HTML5为什么只需要写？
03、行内元素有哪些？块级元素有哪些？空(void)元素有那些？
04、页面导入样式时，使用link和@import有什么区别？
05、介绍一下你对浏览器内核的理解？
06、常见的浏览器内核有哪些？
07、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？
08、如何区分HTML和HTML5？
09、简述一下你对HTML语义化的理解？
10、HTML5的离线储存怎么使用，工作原理能不能解释一下？
二、CSS类的题目01、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
02、CSS选择符有哪些？哪些属性可以继承？
03、CSS优先级算法如何计算？
04、CSS3新增伪类有那些？
05、如何居中p？如何居中一个浮动元素？如何让绝对定位的p居中？
06、display有哪些值？说明他们的作用。
07、position的值relative和absolute定位原点是？
08、CSS3有哪些新特性？
09、请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景？
10、用纯CSS创建一个三角形的原理是什么？
三、Java类的题目
01、介绍Java的基本数据类型。
02、说说写Java的基本规范？
03、Java原型，原型链？有什么特点？
04、Java有几种类型的值？(堆：原始数据类型和栈：引用数据类型)，你能画一下他们的内存图吗？
05、Java如何实现继承？
06、Java创建对象的几种方式？
07、Java作用链域？
08、谈谈This对象的理解。
09、eval是做什么的？
10、什么是window对象？什么是document对象？
OK，一小时到了，这个时间可不算短了，那么这些面试题你答出了几道呢？你写的答案正确了吗？现在你可以去翻看答案了。
如果你答出了绝大多数的或者是全部的题，并且答案也正确了，那么恭喜你……
你这时心里是不是有点小窃喜，认为自己有能力拿高薪了？虽然我也很想这么告诉你，但事实上这只能表明你的基础扎实，毕竟这只是一些非常基础的面试题。骚年~继续努力吧！
如果你只答出了小部分或者答出了大部分题但答案不正确，那么我只想说：“骚年，你的水平还差的远呢。”连这么基础的题你都打不出来，还想拿高薪？回去再练一段时间吧！
扎实的基础是你拿高薪的重要武器，如果你连基础都不扎实，那么想要攻克“高薪”这个厚实的堡垒，那只是痴人说梦罢了。
1.前端框架类问题，问你会不会用vue react啊
2.语言类，问你一些JavaScript语言的问题
3.项目经验，让你讲讲做过的项目，遇到的问题和解决之道
F. 2021-11-10.Vue前端面试题及答案
const vm = new Vue({
...
methods: {
handlerEvent(event) {
console.log(event) // 鼠标点击时，获取到事件对象
}
}
})
1、如果只是事件函数的调用，函数名称后面不要添加括号
好处：函数执行时，第一个形式参数会被系统自动注入
一个事件对象，提供给函数使用
@click="handlerEvent"
2、如果事件函数调用执行时，需要传递参数，函数名称后面
必须添加括号，如果要使用事件对象，就必须手工注入(固定语法)
@click="handlerEvent($event)"
事件冒泡是JS语法中的一种事件触发机制，描述的是目标元素上的事件一旦发生，就会根据DOM节点结构，将事件逐步依次触发到父节点上的一种事件机制
原生JS中通过兼容性语法阻止事件冒泡
event.stopPropagation?event.stopPropagation():event.cancelBubble=true
Vue中对于事件冒泡的处理进行了封装，提供了事件修饰符完成阻止冒泡行为
固定语法：标签对象的事件属性上，添加 @事件对象.stop="处理函数"
.self事件修饰符的作用，就是让事件的触发方式只能由当前标签上发生的事件触发！
.lazy作为表单修饰符，经常用在表单元素上，用于将表单数据的同步机制延迟到表单元素失去焦点时再进行同步，节省资源、提高整体效率！
Vue数据双向绑定的特性，指代的是Vue实例中的数据和网页视图中的数据绑定，实例中数据的更新会直接影响视图的渲染展示，视图中的数据更新会自动同步到实例中的数据，这样的操作机制就是数据双向绑定机制；Vue底层主要是通过Object.defineProperty()数据劫持的操作方式完成的！
数据劫持本质上就是一种变量的高级声明方式，通过数据劫持的语法声明的变量，我们可以针对变量数据的查询、编辑进行监听，随时根据变量的使用情况进行功能的添加，如数据的双向绑定，完成数据的自动同步和自动渲染！
G. WEB前端面试题
第二章 面试题基础篇
2.1 HTML面试题
面试题：行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
面试题：页面导入样式时，使用link和@import有什么区别？
面试题：title与h1的区别、b与strong的区别、i与em的区别？
面试题：img标签的title和alt有什么区别？
面试题：png、jpg、gif 这些图片格式解释一下，分别什么时候用？
2.2 CSS面试题
面试题：css背景纹路
面试题：介绍一下CSS的盒子模型
面试题：CSS选择符有哪些？哪些属性可以继承？
面试题：CSS优先级算法如何计算？
面试题：用CSS画一个三角形
面试题：一个盒子不给宽度和高度如何水平垂直居中？
面试题：display有哪些值？说明他们的作用。
面试题：对BFC规范(块级格式化上下文：block formatting context)的理解？
面试题：清除浮动有哪些方式？
面试题：在网页中的应该使用奇数还是偶数的字体？为什么呢？
面试题：写一个左中右布局占满屏幕，其中左、右俩块固定宽200，中间自适应宽，要求先加载中间块，请写出结构及样式。
面试题：什么是CSS reset？
面试题：css sprite是什么,有什么优缺点
面试题：display: none;与visibility: hidden;的区别
面试题：position有哪些值?有什么作用? 【特别多公司问】
面试题：line-height和height有什么区别？
面试题：opacity 和 rgba区别
2.3 JavaScript基础面试题
面试题：延迟加载JS有哪些方式？
面试题：JS数据类型有哪些？
面试题：null和undefined的区别
面试题：JS数据类型考题
面试题：==和===有什么不同
面试题：JS微任务和宏任务
面试题：JS作用域考题
面试题：JS对象考题
面试题：JS作用域+this指向+原型 考题
面试题：JS判断变量是不是数组，你能写出哪些方法？
面试题：slice是干嘛的、splice是否会改变原数组
面试题：JS数组去重
面试题：找出多维数组最大值
面试题：给字符串新增方法实现功能
面试题：找出字符串出现最多次数的字符以及次数
2.4 真正移动端 —— H5/C3面试题
面试题：什么是语义化标签
面试题：::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。
面试题：如何关闭iOS键盘首字母自动大写
面试题：怎么让Chrome支持小于12px 的文字？
面试题：rem和em有什么样区别
面试题：ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
面试题：webkit表单输入框placeholder的颜色值能改变吗？
面试题：禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片
面试题：禁止ios和android用户选中文字
面试题：自适应 [淘宝无线适配]
面试题：响应式
第三章 面试题进阶篇
3.1 JavaScript进阶面试题
面试题：new操作符具体做了什么
面试题：闭包 【必须会】
面试题：原型链 【必须会】
面试题： JS继承有哪些方式
面试题：说一下call、apply、bind区别
面试题：sort背后原理是什么？
面试题：深拷贝和浅拷贝
面试题：localstorage、sessionstorage、cookie的区别
3.2 ES6面试题
面试题：var、let、const区别
面试题：作用域考题
面试题：将下列对象进行合并
面试题：箭头函数和普通函数有什么区别？
面试题：Promise有几种状态
面试题：find和filter的区别 【大厂】
面试题：some和every的区别 【大厂】
3.3 webpack面试题
面试题：webpack插件
3.4 Git面试题
面试题：git常用命令
面试题：解决冲突
面试题：GitFlow
第四章 面试题框架篇
4.1 区分初中高级的 —— Vue面试题
面试题：Vue2.x 生命周期有哪些？
1.系统自带八个
2.当一旦进入到某个组件会执行哪些生命周期
3.$el和$data在哪个阶段有
4.如果使用keep-alive会多俩个生命周期
5.如果加入keep-alive第一次进入组件会执行哪些生命周期
6.如果加入keep-alive第二次或者第N进入该组件会执行哪些生命周期
面试题：谈谈你对keep-alive的了解
面试题：v-if和v-show区别
面试题：v-if和v-for优先级 2.x
面试题：ref是什么？
面试题：nextTick是什么？
面试题：Vue中如何做样式穿透
面试题：scoped原理
面试题：Vuex是单向数据流还是双向数据流？
面试题：讲一下MVVM
面试题：双向绑定原理
面试题：什么是虚拟DOM
面试题：key是干什么？
面试题：diff算法
面试题：Vue组件传值
面试题：props和data优先级谁高？
面试题：computed、methods、watch有什么区别？
面试题：Vuex
面试题：Vue路由
面试题：Vue项目打包后出现空白页
4.2 微信小程序面试题
面试题：如何自定义头部？
面试题：如何自定义底部？
4.3 uni-app面试题
面试题：生命周期
面试题：条件编译
第五章 面试题性能优化篇
H. 史上最全前端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只在当前组件中起作用？
I. Web前端5道面试题
1.请说明ECMAScript,JavaScript,Jscript之间的关系?
ECMAScript提供脚本语言必须遵守的规则、
细节和准则，是脚本语言的规范。
比如：ES5，ES6就是具体的一js版本。
JavaScript是ECMAScript的一个分支版本,
JavaScript实现了多数ECMA-262中
描述的ECMAScript规范，但存在少数差异。
JScript是微软公司对ECMA-262语言规范的
一种实现,除了少数例外(这是为了保持向后兼容),
微软公司宣称JScript完全实现了ECMA标准.
关系:
JavaScript和JScript都是ECMAScript的版本分支,
二者在语法上没有多大的区别;
只不过一个是NetScape公司的,一个是微软的;
IE系列默认是JScript,其它的则反之用JavaScript。
2.页面加载过程中可能触发哪些事件?它们的顺序是?
页面加载时，大致可以分为以下几个步骤：1)开始解析HTML文档结构2)加载外部样式表及JavaScript脚本3)解析执行JavaScript脚本4)DOM树渲染完成5)加载未完成的外部资源6)页面加载成功
执行顺序:1)documentreadystatechange事件2)documentDOMContentLoaded事件3)windowload事件
3.函数中在声明变量a前使用a会产生错误吗?为什么?
不会,JS中能够进行变量作用域提升,
把所有变量、函数的声明提升到当前
作用域的最前面,但不进行赋值操作;
所以可能造成获取的值是undefined。
4.什么是hash,以及hashchange事件?
先了解下什么是hash:hash即URL中"#"字符后面的部分。
a)使用浏览器访问网页时，
如果网页URL中带有hash，
页面就会定位到id(或name)
与hash值一样的元素的位置;
b)hash还有另一个特点，
它的改变不会导致页面重新加载如橡尺;
c)hash值浏如清览器是不会随请求发送到服务器端的;
d)通过window.location.hash属性获取和设置hash值。
window.location.hash值的变化会直渣高接
反应到浏览器地址栏(#后面的部分会发生变化)，同时，浏览器地址栏hash值的变化也会触发
window.location.hash值的变化，
从而触发onhashchange事件。
再来了解下什么是hashchange事件:
a)当URL的片段标识符更改时，
将触发hashchange事件(跟在#符号后面的URL部分，包括#符号)b)
hashchange事件触发时，
事件对象会有hash改变前的URL(oldURL)和hash改变后的URL(newURL)两个属性。
5.什么是CDN,CDN对于网站有什么意义,它有什么样的缺点?
CDN又称为内容分发网络;本意在于
尽可能避开互联网上有可能影响数据
传输速度和稳定性的瓶颈和环节，
使内容传输的更快、更稳定。
主要目的:
解决因分布、带宽、服务器性能带来的访问延迟问题，
适用于站点加速、点播、直播等场景。
使用户可就近取得所需内容，解决Internet网络拥挤的状况，
提高用户访问网站的响应速度和成功率。
缺点:
a)实施复杂,投资大;
b)目前大部分的CDN还只是对静态内容加速，
对动态加速效果不好;
而双线对动态加速的效果跟静态是一样的。
J. 前端面试题（十五）
已知高度和宽度的元素：
设置父元素为相对定位relative，给子元素设置绝对定位absoluted，top: 0; right: 0; bottom: 0; left: 0; margin: auto;
设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;
未知高度和宽度的元素：
设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translate(-50%，-50%);
设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform:translate(-50%，-50%);
组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的 data ，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份 data ，就会造成一个变了全都会变的结果。
for of：
支持 return ，并且是值 of 数组（不能遍历对象）
1. 可以避免所有 for-in 循环的陷阱
2. 不同于 forEach()，可以使用 break, continue 和 return
3. for-of 循环不仅仅支持数组的遍历。同样适用于很多类似数组的对象
4. 它也支持字符串的遍历
5. for-of 并不适用于处理原有的原生对象
for in：
forEach：
assets文件夹里是静态资源；components是放组件；router是定义路由相关的配置；view视图；app.vue是一个应用主组件；main.js是入口文件
在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。
生命周期函数： activated（ 组件激活时调用 ）、deactivated（ 组件停用时调用 ）
常见的使用场景可以分为三类:
当频繁执行条件时，不适合使用 v-if ,用 v-show ;
反之执行条件的次数很少，使用 v-if 即可。
v-if 和 v-for ,不推荐两者一起使用在同一个元素上，虽然也能运行，但是编辑器会报警告；两者一起使用时，v-for比v-if具有更高的优先级，