Ⅰ 面试Web前端需要注意什么会面试哪些问题
作为一名HTML5前端工程师，为了工作，为了就业我们免不了要参加各种各样的面试。为此总结了面试前的注意事项：
第一：注意自己的仪容仪表
面试之前，一定要再次从头到脚地将自己的仪容仪表检查一遍。检查时主要包括，自己的牙缝是不是还有食物残渣，所以你需要就近找一个卫生间，如果没有卫生间就近找一个角落也是可以的，但是切记一定不要在大庭广众之下。因此，为了给自己整理出着装的时间请在约定时间前20分钟到达。
第二：再次检查面试时所需的资料是否都已带全
这些资料主要包括：身份证明、学历文凭证明、个人简历、以往作品等等，如果这些东西齐全之后，需要对这些资料做一个整理与排序。因为没有哪个面试官希望看到面试者拿出一堆“莫名其妙”的东西塞给他，让他自己再一页一页的翻找自己需要的内容，如果说这些资料在面试官手中不小心散落一地，结果可想而知。这样的求职者在面试官眼中也一定不是一个让人放心、有条不紊的员工。当然如果检查时发现资料没有带全，也不要紧张。反而你要庆幸幸亏及时检查，也有足够的时间组织语言去向面试官解释。
第三：面试之前将通信工具调成振动或关闭状态
虽然说面试者与面试官之间是一个平等的关系，但毕竟你是去人家公司求职的，始终处于一个被动的状态，所以最起码的尊重还是要做到的。曾经有调查显示，对于面试过程中接电话或是被电话打断的求职者，会被HR减分。
第四：等候面试官时，仔细观察多了解面试公司
在等候面试官时，可以暗自观察一下公司的大体情况比如员工的着装风格、公司的LOGO或是贴在墙上的企业文化、公司的环境等等，一来可以在接下来的面试过程中表现出自己对公司的认同感，二来也可以让自己对求职公司多些了解，以确定是否要接受这里的工作。如果你身边有公司的资料宣传架，不妨取一本翻看一下，也会增加HR对你的好感。
第五：放松心情，保持自信
面试时一定要保持一定的自信，这样也会给面试官留下很好的印象。面试只是你步入工作的第一步，即便是失败了那也是人生重要的经历。失败是为了更好的迎接下一个挑战。
作为一名web前端工程师千万不要觉得懂技术面试就能万事大吉了，像以上五点细节性的东西也是一定要掌握的。
面试题系列：
网页链接
Ⅱ 前端面试要点
想要通过前端面试顺利进入一线大厂成就高薪前端梦。那么首先，我们得知道前端面试中，社招和校招究竟有啥区别？
对于前端开发来说，如果说社招更看重对前端技术体系的深入理解，以及解决问题的能力话，那校招更看重的其实是基本功和学习能力（或者说是潜力）。
但其实，无论是社招还是校招，面试的时候都会问到一些曾经操作过的项目，尤其是大厂，或者热门高薪部门，面试官除必问的技术经验外，也会对技术深度进行一个基础的考核，那在这种情况下如何hold住大厂面试呢？
前端面试三要素：简历、个人介绍、技术能力。下面，就来分别聊一聊。
1、简历筛选关：
HR一般会去看简历中所提的技术栈是否匹配，怎么看呢？我们可以抓住简历中的技术名词，一般来说如果一点技术名词都没有提到，那么大概有以下几种可能：很水、很牛但概率很小、不会写简历。所以，一部分人可能会因为简历的问题没有了面试机会，这点是需要非常注意的。
2、个人介绍关：
通过了简历筛选阶段，就真正到了面试环节。这时候一定要准备好一段最多3分钟的个人介绍。请注意，最多3分钟！言简意赅的说明自己的工作时间，擅长技术栈和自己的工作预期。
3、项目经验表达：
对前端开发学习者而言，JS并不陌生，但大厂的JS面试题却总是显得很“陌生”，怎么样能够真正做到深入理解与高级应用？这不仅是面试过程中对前端求职者的要求，也是大多数前端开发者的痛点。
大厂面试中，面试官除了关注你的项目经验外，还往往喜欢和面试者深入探讨前端某些技术领域成体系的前端知识。比如：模块化、异步解决方案、网络、框架及原理、线程等，但在与面试官的正面battle中，求职者总会败下阵来。
所以，建议大家在Web前端面试前一定要注重这三个方面的内容。注重了这些想找找到一份适合的Web前端开发工作并不是难事。
Ⅲ 前端面试 问什么问题
web前端面试会问人事方面的内容和web前端技术的内容；
人事的面试
web前端人事面试方面，需要注意如何自我介绍、性格有哪些优劣势、职业规划方向是什么、你的特长是什么、对于加班之类你是怎么看待等人事面试内容；
web前端技术的面试
技术面试，需要注意HTML+CSS+JavaScript以及JS主流框架的使用，比如Vue、React等，前端相关技术，比如tcp握手协议、网络安全、后端技术等；
对于web前端面试准备，建议你去看“决胜前端”（min app），它里面包含了很多web前端技术面试、人事面试等面试真题，而且针对面试题做了详细的分析与解答。
我给你截图看一下例子吧
Ⅳ 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节点，里面有（标签名、子节点、文本等等）
Ⅳ 前端开发过程中遇到过什么困难
前端开发过程中遇到的困难还是很多
1、面试中前端开发过程中遇到的困难这个问题主要是相看面试者是不是有独立解决问题的能力及解决问题的方案以及工作中的的一些两点
2、遇到这样的问题可以说出一个自己解决的比较完美的问题，如：vue不适合做cms，因为单页面应用对seo很不友好，解决的方法就是：我们使用nuxt技术，在保证使用vue语法开发的同时，也使用了服务端渲染技术保证了seo效果，这个过程突出了自己的学习nuxt等新技术的能力
3、另外也是有很多实际的开发问题不好解决，的但是那些自己解决不好的问题不适合 在面试的过程中说的
Ⅵ 如何面试前端开发
自我介绍，可以简单介绍你毕业什么学校，什么专业，工作经历简明扼要的说出来就可以了，不要详细到你哪年进入公司，哪年离开公司，负责项目做什么的，说一大通。这个对面试官来说，想让你自我简单介绍，其实考察点有两方面：1面试者的表达能力和概括能力，2面试者目前掌握什么技术，做过什么项目，在项目中的角色来初步判定这个人的能力
有些面试者回答问题，在介绍项目的时候，很大概的说，或者一句话前端都是我做的，这些都是我设计的；这样肯定是不行的，面试官让你介绍项目的时候肯定是希望你详细介绍你的项目，这个项目使用者是谁，让我知道谁在使用这个项目；你负责哪些模块，哪些组件，那些模块实现什么业务逻辑，用到什么技术，这个能让面试官更加知道你项目的业务，才能从你描述中知道这类的业务会遇到什么问题，以及你使用的技术是否合理，能更加判定你的能力，才能更好的提出问题，才能更好的面试下去。
前端技能在问到很多面试者的时候感觉自己都懂前端，其实他们只是懂使用js敲代码而已，很多前端知识，以及前端原理都不懂，只会使用的话，那么永远只会走来人家的后面。就那一个比喻来说吧，如果你只是一个会开车的司机，不会修车或者造车，那么如果哪天车出了毛病，你都不知道，到时候才去学习车的构造原理。或者你会说我直接给维修厂不就可以了，如果维修厂关门了呢怎么办。所以我们前端开发人员还是要脚踏实地，不要说我会使用vuejs，react前端框架，问你一个mvvm模式是什么，你都说不知道，怎么实现mvvm框架，在不使用别人开发mvvm框架，自己可以开发一个简单的mvvm框架？
Ⅶ 前端面试一般问什么
web前端面试会问人事方面的内容和web前端技术的内容；
人事的面试
web前端人事面试方面，需要注意如何自我介绍、性格有哪些优劣势、职业规划方向是什么、你的特长是什么、对于加班之类你是怎么看待等人事面试内容；
web前端技术的面试
技术面试，需要注意HTML+CSS+JavaScript以及JS主流框架的使用，比如Vue、React等，前端相关技术，比如tcp握手协议、网络安全、后端技术等；
对于web前端面试准备，建议你去看“决胜前端”（min app），它里面包含了很多web前端技术面试、人事面试等面试真题，而且针对面试题做了详细的分析与解答。
我给你截图看一下例子吧
Ⅷ 前端面试被问到，vue实现数据双向绑定，原理是啥
其原理大致是这样：
在数据渲染时使用prop渲染数据
将prop绑定到子组件自身的数据上，修改数据时修改自身数据来替代prop
watch子组件自身数据的改变，触发事件通知父组件更改绑定到prop的数据
这样做的好处是：父组件数据改变时，不会修改存储prop的子组件数据，只是以子组件数据为媒介，完成对prop的双向修改。
Ⅸ 面试web前端的工作,会被问到什么问题
在实际的面试中，你可能需要使用 JavaScript、CSS 和 HTML 来编写代码。在你的面试期间，你可能需要实现 UI、构建窗口小部件或使用 Lodash 和 Underscore.js 这样的库编写常用的实用程序函数。例如：构建常见的 Web 应用程序的布局和交互，例如类似 Netflix 网站那样的。实现小部件，如日期选择器、轮播或电子商务网站购物车。写一个类似 debounce 或深度 clone 对象的函数。