面经

1.HTML有哪些语义化标签？为什么要语义化？

h1~h6
header
footer
title
nav
main：主要内容，一个页面只能使用一次。
ul
li
em
strong
HTML结构清晰，代码可读性高，便于维护，可根据标签确定上下文和权重问题。

2.css选择器，权重

CSS选择器	表示
ID选择器	#id
class选择器	.class
标签选择器	p、a等
通配符选择器	*（表示选择所有的标签元素）
属性选择器	[type=‘text’]
伪类选择器	:hover
伪元素选择器	::first-line
其他选择器	子选择器、相邻选择器

权重

类型	权重
! important	无穷
内联样式（如style=“color:red”）	1000
ID选择器	100
class/属性/伪类选择器	10
标签/伪元素选择器	1
通配符	0

3.js闭包

闭包概念
能够读取其他函数内部变量的函数。
简单来说，就是在一个函数内部的函数，内部函数持有外部函数内变量的引用。

闭包有3个特性：
①函数嵌套函数
②函数内部可以引用函数外部的参数和变量
③参数和变量不会被垃圾回收机制回收

什么情况下使用闭包？定时器。

4.js原型

obj.a，a就是obj的私有属性
obj.prototype.b，b是obj的共有属性。
即通过new obj出来的实例，均拥有obj的共有属性。

5.css盒子垂直居中

1.子绝父相后，上下左右设置为0，margin：auto
2.子绝父相后，top：50%；left：50%
transform：translate(-50%，-50%)
3.子绝父相后，top：50%；left：50%
将margin-top和margin-left设置为负的盒子自身宽高的一半
4.flex布局，垂直align-item：center；水平justify-content：center

6.flex布局有哪些属性

垂直align-item：center；
水平justify-content：center
主轴flex-direction：row | row-reverse | column | column-reverse
换行flex-wrap：nowrap | wrap | wrap-reverse(换行，第一行在下方)
放大：flex-grow：nums
缩小：flex-shrink：nums

7.vue生命周期，$nexttick

我的理解是生命周期是vue实例从创建到毁灭的过程，一般在项目中多使用的是created和mounted。
他们两个的区别在于：
created：在模板渲染成html前调用，即通常发起请求初始化某些属性值，然后再渲染成视图。一般不可直接操作dom元素，因为未编译。
mounted：在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
注： mounted在整个实例中执行一次。

$nexttick()下一次DOM更新完成时进行的回调。
this.$nextTick()方法主要是用在数据改变。vue中数据和dom渲染由于是异步的，所以，要让dom结构随数据改变这样的操作都应该放进this.$nextTick()的回调函数中。created()中使用的方法时，dom还没有渲染，如果此时在此处进行dom赋值数据（或者其它dom操作）时无异于徒劳，所以，此时this.$nextTick()就发挥作用了，而与created()对应的是mounted()则是在dom完全渲染后才开始渲染数据，所以在mounted()中操作dom基本不会存在渲染问题。
（可以引申出事件循环）

computer和watch去区别？
computer时计算属性，依赖其他属性值，且具有缓存，只当依赖值发生改变，下一次获取computer的值才会重新计算。一个数据受多个数据影响。
watch更多的是观察作用，监听某个数据发生改变然后执行回调或者执行异步操作。一个数据影响多个数据。

8.vue组件通信

组件通信传值

9.vuex

10.vue-router钩子函数

beforeEach
afterEach
路由改变前后触发。
参数to、form、next()

11.跨域，同源策略

网络协议——跨域

12.ajax原理

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

下面是使用Ajax可以完成的功能：
动态更新购物车的物品总数，无需用户单击Update并等待服务器重新发送整个页面。提升站点的性能，这是通过减少从服务器下载的数据量而实现的。

13.MVVM与MVC的缺点、区别

MVVM主要解决了MVC中大量的DOM操作使页面渲染性能降低，加载速度变慢，影响用户体验。利用MVVM可以使我们的代码更加专注于处理业务逻辑而不是去关心DOM操作。

MVVM设计模式的缺点

1. 数据绑定也使得bug很难被调试。比如你看到页面异常了，有可能是你的View的代码有bug，也可能是你的model的代码有问题。数据绑定使得一个位置的Bug被快速传递到别的位置，要定位原始出问题的地方就变得不那么容易了。

2. 数据双向绑定不利于代码重用。客户端开发最常用的是View，但是数据双向绑定技术，让你在一个View都绑定了一个model，不同的模块model都不同。那就不能简单重用view了

3. 一个大的模块中model也会很大，虽然使用方便了也很容易保证数据的一致性，但是长期持有，不释放内存就可能花费更多的内存。

14.vue的data为什么一定是函数

javascipt只有函数构成作用域(注意理解作用域,只有函数的{}构成作用域,对象的{}以及 if(){}都不构成作用域)，data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立,不会相互影响。
如果不用function 返回,每个组件的data 就应该是用对象类型，那这样所有组件的data都是内存的同一个地址,一个数据改变了其他也改变了。