2019前端面试题及答案
HTML——CSS——JS——es6——Vue——微信小程序
HTML面试题
1.请至少写出5个HTML块级元素标签。
div,p,form,table,h1~h6
2.请至少写出5个行内元素标签。
span,img,input,button,a
3.写出空元素。
br,hr,link
4.写出table标签下包含哪些标签元素。
tr,th,td,tfoot,tbody
5.很多网站不用iframe,table这两个元素，为什么？
因为浏览器页面渲染从上向下加载的，用iframe和table这两个标签要先加载这两个标签的内容，加载完成在整体加载然后渲染，用户体验效果不好。
6.jpg和png的区别。
png:压缩比高，色彩好。
jpg:在www网站，用来存储和传输照片的格式
7.至少写出5个HTML5的新标签。
header,footer,nav,section,video
8.a标签在新窗口打开链接怎么加属性。
9.写了2个标签，两个标签之间有空格的情况怎么解决。
将2个标签写在一行里
10.DOCTYPE有什么作用？
告诉浏览器使用哪个版本的HTML文档渲染页面
11.页面导入样式时，link与import的区别。
（1）link方式的样式权重比import的权重高。
（2 import在html使用时需要
(3) link支持js可以改变样式，而import不支持
12.如何区分html和html5。
（1）DOCTYPE的声明方式
（2）根据新增加的结构，功能来区分
13.无样式内容闪烁？（FOUC）Flash Of Unstyle Content
@import导入css文件会等到文档加载完成后再加载CSS样式，因此，在页面DOM加载完成到CSS导入完成之间会有一段时间页面上的内容是没有样式的。
解决方法：使用link标签加载CSS样式文件。因为link是顺序加载的，这样的页面会等到CSS加载完成后再下载HTML文件，这样先布局好，然后就不会出现FOUC的问题了。
CSS面试题
JS面试题
VUE面试题
-------------------
vue中更新版本/升级添加版本号/项目升级/打包部署/等
1.对MVVM的理解
M：model层，在model层对数据进行操作和修改数据
V：View(视图层）
VM:ViewModel监听模型数据的改变和控制视图行为。相当于模型层和视图层的一个桥梁，起连接作用。
在MVVM模式下，View和Modal没有直接的联系，而是通过ViewModal进行交互，Modal和ViewModal之间是交互是双向的，因此View数据的变化会同步到Modal上，Modal数据的变化也会立即反应到View上。
ViewModal通过数据双向绑定把View和Modal层连接起来，而View和Modal之间的工作同步是完全自动的，无需别人干涉，因此开发者只关注业务逻辑，不需要动手操作DOM，不需要关注状态的同步问题，复杂的数据状态完全由MVVM管理
2.生命周期：Vue实例从创建到销毁的过程。从开始创建，初始化数据，编译模板，挂载DOM->渲染，更新->渲染，销毁等一系列过程。
beforeCreate(创建前）：只是单纯的创建$el和data,数据观测和初始化时间还未开始（自己理解：$el和data都只是创建）
created(创建后）：完成数据观测，属性和方法的运算，初始化事件（data），但是$el属性还没有显示出来（自己理解：data初始化完成，$el仍只是创建）
beforeMounte(挂载前）：在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。（自己理解：vue实例的$el和data都初始化了，但还是挂载之前未虚拟的DOM节点，data尚未替换。）
此时还没有挂载html在页面上。
mounted(载入后）：在el被创建的vm.$el替换，并挂载到实例上去之后调用。实例已完成以下的配置。用上面编译好的html内容替换el属性指向DOM对象。完成模板的html渲染到html页面上。此过程是ajax交互过程（自己理解：用真实数据替换虚拟DOM）
beforeUpdate（更新前）： 重新渲染之前触发（自己理解：data数据已经发生改变，但是未渲染）
updated（更新后）：数据已经更改完成，dom也重新render完成，更改数据会陷入死循环（自己理解：data数据已经发生改变，并且旧数据代替新数据）
beforeDestory（销毁前）：在实例销毁之前调用。实例仍然完全可用
destoryed（销毁后）：在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
(1).生命周期的作用？
生命周期有很多钩子函数，通过钩子函数让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
(2).生命周期总共有几个阶段？
8个，创建前/后；载入前/后；更新前/后；销毁前/后
(3).第一次页面加载会出发那几个钩子？
beforeCreate, created, beforeMount, mounted
(4).DOM渲染在哪个周期已经完成？
mounted
(5)简单描述每个周期具体适合那些场景？
beforeCreate:可以在这个上加loading事件，在加载实例时触发
created:初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适合在这里调用
mounted:挂载元素，获取到DOM节点
updated:如果对数据统一处理，在这里协商相应函数
beforeDestory:可以做确认停止事件的确认框
nextTick:更新数据后立即操作dom
3.VUE双向绑定原理
采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter/getter，在数据发生变化时发布消息给订阅者，出发相应的监听回调。
具体步骤：
第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据的变化
第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是：
1.在自身实例化时往属性订阅器（dep）里面添加自己
2.自身必须有一个update（）方法
3.待属性变动dep.motice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。
4.Vue组件间的参数传递
父传子：props（接收值）
子传父：$emit(通过子组件绑定事件把参数传给父组件）
兄弟：vuex
5.Vue的路由实现：hash模式和history模式
hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash,用window.location.hash读取
特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务器安全无用，hash不会重加载页面
hash模式下，hash符号之前的内容会被包含在请求中。如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
history模式：它采用的是HTML5的新特性；且提供了2个新方法：pushState(),replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听状态变更。history模式下，前端URL必须和实际向后端发起请求的URL一致，如http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。
6.Vue与React的区别？
相同点：
React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用；中心思想相同：一切都是组件，组件实例之间可以嵌套；都提供合理的钩子函数，可以让开发者定制化地去处理需求；
不同点：
React采用的Virtual DOM会对渲染出来的结果做脏检查；Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作Virtual DOM。
7.vue的优点是什么？
可重用性：可以将公共部分抽取出组件
低耦合。使用了双向绑定原理
8.路由之间跳转
声明式（标签跳转
编程式（js跳转router.push（‘/home’））
10.如何自定义组件？
（1）在页面引入 import
(2)注册组件 compoment
(3）在中写入DOM节点
11.vuex是什么？怎么使用？
全局存储数据用的
在main.js引入store，注入。新建了一个目录store，….. export 。
12.如何让css在当前组件中起作用
就在当前组件内使用
13.怎么定义vue-router的动态路由以及如何获取传过来的动态参数？
在router目录下的index.js文件中，对path属性加上/:id
接收传递的参数 params.id
14.vue-router有哪几种导航钩子？
3种：一种是全局导航钩子：router.beforeEach(to,from,next),作用：跳转前进行判断拦截
to:route即将进入的目标路由对象
from:route当前导航正要离开的路由
next:function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。
第二种：组件内的钩子
第三种：单独路由独享组件
15.说出至少4种vue当中的指令和他的用法？
v-if
v-on：
v-bind:class
v-modal:
v-for:
16.vue-loader是什么？用途是什么？
解析.vue文件的一个加载器
用途：js可以写es6,style样式可以scss或less等
17.scss是什么？在vue.cli中的安装使用步骤是？有那几大特性？
css的预编译
第一步：先装css-loader、node-loader、sass-loader等加载器模块
第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss
第三步：在同一个文件，配置一个module属性
第四步：然后在组件的style标签加上lang属性 ，例如：lang=”scss”
特性：
可以用变量，例如（$变量名称=值）；
可以用混合器，例如（）
可以嵌套
18.为什么使用key?
key作为唯一标识，当有相同标签名的元素切换时，需要通过key特性设置唯一的值来标记以让Vue区分它们，否则vue为了效率只会替换相同标签内部的内容
19.说出vue.cli项目中src目录每个文件夹和文件的用法？
assets文件夹放静态资源
components放组件
router是定义路由相关配置
view视图
app.vue是一个应用主组件
main.js是入口文件
20.vue.cli中怎么使用自定义组件？有遇到过哪些问题吗？
第一步：在components目录新建你的组件文件（smithButton.vue），script一定要export default {
第二步：在需要用的页面（组件）中导入：import smithButton from ‘…/components/smithButton.vue’
第三步：注入到vue的子组件的components属性上面,components:{smithButton}
第四步：在template视图view中使用，
问题：命名需要注意smithButton命名，使用的时候则smith-button。
21.active-class是哪个组件的属性？
vue-router模块的route-link组件
23.v-if与v-show的区别？
v-show是css切换，如果，display：none在源码中也不显示 (block显示）
v-if条件渲染，是完整的销毁和重新创建 v-if="false",当为false时不会渲染页面
24.绑定class的数组用法
对象方法：v-bind:class="{'name':'snsn','price':11}
数组方法：v-bind:class="[class1,class2]"
行内：v-bind:style="{color:color,fontSize:fontSize+'px}"
25.计算属性和watch的区别
computed:监听值，计算出一个新的值
watch:监听值的变化
computed 是一个对象时，它有哪些选项？
有get和set
computed 和 methods 有什么区别？
methods是一个方法，它可以接受参数，而computed不能，computed可以缓存，methods不会。
computed 是否能依赖其它组件的数据？
computed可以依赖其他computed，甚至是其他组件的data
watch 是一个对象时，它有哪些选项？
watch配置
handle
deep是否深度
immeditate是否立即执行
26.事件修饰符
.stop事件：阻止冒泡事件发生
.prevent:防止事件加载跳转到下一个页面
.once:事件只执行一次
.self:当事件发生在该元素本身而不是子元素的时候会出发
27.组件中data为什么是函数？(为什么组件中的 data 必须是一个函数，然后 return 一个对象，而 new Vue 实例里，data 可以直接是一个对象？)
因为组件是用来复用的，JS里对象是引用关系，这样作用域没有隔离，而new Vue的实例，是不会被复用的，因此不存在引用对象的问题。
28.怎么理解单向数据流
这个概念出现在组件通信。父组件是通过 prop 把数据传递到子组件的，但是这个 prop 只能由父组件修改，子组件不能修改，否则会报错。子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。
一般来说，对于子组件想要更改父组件状态的场景，可以有两种方案：
在子组件的 data 中拷贝一份 prop，data 是可以修改的，但 prop 不能：
export default {
props: {
value: String
},
data () {
return {
currentValue: this.value
}
}
}如果是对 prop 值的转换，可以使用计算属性：
export default {
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase();
}
}29.slot插槽
单个插槽：
当子组件模板只有一个没有属性的插槽时，父组件传入的整个内容片段将插入到插槽所在的 DOM 位置，并替换掉插槽标签本身。
最初在
命名插槽：
solt元素可以用一个特殊的特性name来进一步配置如何分发内容。多个插槽可以有不同的名字。
这样可以将父组件模板中 slot 位置，和子组件 slot 元素产生关联，便于插槽内容对应传递
作用于插槽：
可以访问组件内部数据的可复用插槽(reusable slot)
在父级中，具有特殊特性 slot-scope 的 元素必须存在，表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 prop 对象。
30.css只在当前组件起作用。
在style标签中写入scoped即可。例如：
31.route和router的区别：
route是“路由信息对象”，包括path,params,hash,query,fullPath,matched，name等路由信息参数。而router是“路由实例“对象包括路由的跳转方法，钩子函数等
32.vue.js的两个核心是什么？
数据驱动，组件系统
33.v-on可以绑定多个方法吗？
可以
34.vue等单页面应用以及优缺点？
优点：可以通过API实现响应的数据绑定和组合的视图组件
缺点：如果数据很多，页面加载慢
35.this.$route.params与this.$route.query的区别。（开发中遇到什么问题?）
this.$route.query的使用
A:传参数
this.$router.push({
path:'/custom',
quuery:{
id:id
}
})B:接收参数
this.$route.query.idC.在url中的形式（url带参数）
http://172.19.186.224:8080/#/monitor?id=1
D.页面之间用路由跳转传参时，刷新跳转后传参页面，数据还会显示存在。
this.$route.params的使用
A.传参
this.$router.push({
path:'/custom',
params:{
id:id
}
})B:接收参数
this.$route.params.idC.在url中的形式（url不带参数）
http://172.19.186.224:8080/#/monitor
D.页面之间用路由跳转传参时，刷新页面跳转传参的页面，数据不存在
浏览器面试题
React面试题