1.vue生命周期
在组件被加载后，在应用运行过程中，组件可能会经历挂载、数据更新、销毁等各个阶段，称为组件的生命周期。每个阶段会执行相应的生命周期钩子，用户可以在生命周期钩子中处理业务逻辑。
1、创建：beforeCreate、created
2、挂载：beforeMount、mounted
3、更新：beforeUpdate、updated
4、销毁：beforeDestroy、destroyed
2.vue双向数据绑定的原理
你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
- 创建订阅者，当组件的data属性改变时候，修改表单元素的value。
- 给表单元素创建事件（change事件或者input事件），事件的回调中，修改组件的数据。
3.v-show，v-if的区别
行为不同：v-if指令在满足条件时候才会渲染DOM，v-show一开始就渲染DOM，满足条件时候才设置CSS的display属性让元素显示出来。
应用场景不同：一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
4.组件之间传值（父子组件，同级组件或无关组件）
父子组件通信有3种方式：
1、props
2、事件
3、ref
兄弟组件通信有2种常用方式：
1、eventBus
2、vuex
5.watch，computed的区别
1、场景不同，computed是计算属性，用在渲染或者其他获取计算属性值的地方，watch是定义的订阅者，订阅数据改变，执行回调。
2、使用方式不同，computed是直接取值，watch是监听改变，执行回调。
3、computed方法不应该有副作用，watch方法则无此要求。
4、computed是惰性求值，只有依赖的数据发生改变，并且其他地方使用到了这个值，才会调用方法进行计算；watch则是每次依赖的数据改变，都会触发执行。
6.递归，闭包是什么
闭包相当于函数的返回值为另一个函数，而递归则相当于函数的参数为另一个函数。
7.深拷贝，浅拷贝
当我们将a赋值给b，然后更改b中的属性，a也会随着变化。
也就是说a和b指向了同一块内存，所以修改其中任意的值，另一个值都会随之变化，这就是浅拷贝。
如果给b放到新的内存中，将a的各个属性都复制到新内存里，就是深拷贝。JSON.parse和JSON.stringify
也就是说，当b中的属性有变化的时候，a内的属性不会发生变化。
8.cookie，localstorage，sessionstorage区别
localStorage和sessionStorage倆者唯一的区别就是生命周期，localStorage可以用于页面间传递数据，sessionStorage可以用来存储临时数据
cookie始终在同源的http请求中携带，即使不需要，cookie在浏览器和服务器中来回传递。而localStorage和sessionStora仅仅在本地存储，不会好服务器通信，也不会自动把数据发送给服务器。
存储大小不同，cookie为4kb左右；localStorage， sessionStorage可以达到5M
数据有效期不同，sessionStorage仅在同源窗口中有效，关闭窗口就消失了，cookie可以设置过期时间，localStorage长期有效
localStorage， sessionStorage有现成的API， cookie需要程序员手动封装
9.promise是干什么的
Promise是用来解决前端的[异步请求]的回调地狱的，回调地狱就是我们往往需要在请求成功的success函数里再写函数，就会形成回调地狱。而且代码也很难维护，会造成一个函数的输出是另一个函数的输入的情况，所以从本质上promise是异步编程的一种解决方案。
但是,当网络请求非常复杂时,就会出现回调地狱。
我们需要通过一个urI从服务器加载一个数据data,data1中包含了下一个请求的url2
我们需要通过data1取出url2,从服务器加载数据data2,data2中包含了下ー个请求的url3
我们需要通过data2取出urI3,从服务器加载数据data3,data3中包含了下ー个请求的ur4
发送网络请求ur4,获取最终的数据data4
promise有三种状态： pending(等待态)，fulfiled(成功态)，rejected(失败态)。
promise在自己的框架中，封装了一系列的内置的方法。
捕获错误的方法 catch()
解析全部方法 all() — 谁跑的慢，以谁为准执行回调。all接收一个数组参数，里面的值最终都算返回Promise对象
竞赛 race() — 谁跑的快，以谁为准执行回调
生成一个成功的promise resolve()
生成一个失败的promise reject()
10.var，let，const区别
var 存在变量提升，声明的变量为全局变量，不存在块级作用域,可以跨块访问, 不能跨函数访问
let、const具有块级作用域用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。存在暂时性死区，不存在变量提升
const用来定义常量，使用时必须初始化(即必须赋值)
11.防抖，截流
在事件触发后的指定时间之后，再去执行真正需要执行的函数，如果在该时间之内事件又被触发，则重新开始计时,被打断就重新来,_.debounce(fun,时间),lodash库实现。
- 搜索框输入查询,用户最后一次输入完才调用；
- 按钮提交事件；
在指定时间内触发多次函数的话，只有一次是可被执行的，下一次执行只能等到下一个周期里(技能冷却,在没干完一件事前不能干其他的等待这次执行完) lodash库实现,_.throttle(fun,时间)。 - 计算鼠标的移动距离；
- 监听滚动事件；
12.vue常用指令有哪些？
v-show
v-if、v-else-if、v-else
v-for
v-bind
v-model
v-on
13.css三大特性
继承性,层叠性,优先级
!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承
14.data变化而视图未更新解决
用强制更新this.$forceUpdate();
15.array的方法
push()从数组的尾部插入一个或多个元素
pop()从数组的尾部删除一个元素
unshift() 从数组的头部插入一个或多个元素
shift() 从数组的头部删除一个元素
concat()连接一个或多个数组
map数组方法, 里面接受一个回调函数
splice(start, length, [可选参数列表]) start:开始裁切的下标, length:要裁切多少个
map(item,index,"原数组")
foreach(item,index,"原数组")
sort排序
spliceslice(start, end) start:开始裁切的下标, end:结束裁切的下标(end切不到) => 实际上裁切的范围是 下标start到end-1
filter(item,index,"原数组")过滤条件
join 以特定的连接符, 把数组连接成字符串
reverse反转数组, 把数组的顺序进行颠倒
indexof在数组中查找指定元素 如果有就返回下标, 如果没有返回-1 (可选参数: 从指定下标开始往后查找元素)
lastIndexOf() 获取元素在数组中第一次出现的下标，如果没有，返回-1
every返回值均是判断条件，只要其中有一项不满足，返回false
some返回值均是判断条件，只要其中有一项满足，返回true
find方法返回通过测试（函数内判断）的数组的第一个元素的值
16 CSS选择器
id选择器 例：（#id）
class选择器 例：（.class）
标签选择器 例：（div）
子选择器 例：（ul>li）
后代选择器 例：（li a）
并集选择器 多个选择器可同时设置同一样式 例:(div,p,span{})
交集选择器 连写没空格 同时满足多个条件 例:(p.class{})
通配符选择器 例：（*）
属性选择器 例：（a[rel='external']）
伪类选择器 例：（a:hover）
伪元素选择器 例: (div::before)
17 盒子模型
所有HTML元素可以看作盒子，它包括：外边距（margin），内边距（padding），边框（border），和实际内容（content）。
18 .父子组件生命周期执行顺序
1）加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
2）更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
3）销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
19.垂直水平居中
行内元素实现水平垂直居中：
text-align: center;（text-align: center只能实现文本的水平居中
line-height: 50px;（line-height不能实现多行文本的垂直居中）
padding:50px;（不固定高度的垂直居中 通过设置padding实现）
使用display设置为table，配合样式vertical-align设置为middle来实现，如下：
父元素{
display：table；
}
子元素{
display：table-cell；
vertical-align：middle；
}
块级元素实现水平垂直居中：
第一种方式：使用弹性盒模型实现水平垂直居中
display: flex;
justify-content: center;
align-items: center;
第二种方式：采取绝对定位配合margin的方式实现（这种方式有缺陷 需要知道固定的宽度和高度才行）
position: absolute;
left:50%;
top:50%;
margin-left: -50px;（高度设置了100px，margin-left就是宽度的一半）
margin-top: -50px;（宽度也设置了100px，margin-top就是高度的一半）
第三种方式：可以采取借助css3的变形属性transform来实现的方式实现
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,50%);（在当前位置偏移自身宽高的一半）
第四种方式：需要盒子有宽高，但是不需要去计算偏移盒子的宽高
position: absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
height:100px;
width:100px;
20 路由守卫
路由的导航守卫 又叫做路由的钩子函数（生命周期函数）
就是在跳转页面的时候把路由栏下来，做一些操作在放行，vue一共提供了三种路由守卫。
第一种是全局守卫
beforeEach路由进入之前
afterEach路由进入之后
第二种 组件内守卫
beforeRouteEnter 路由进入之前
beforeRouteUpdate 路由更新之前
beforeRouteLeave 路由离开之前
第三种 路由独享守卫
beforeEnter 路由进入之前
21. 权重叠加
行内样式,id选择器个数,类选择器个数,标签选择器个数
规则:从左到右依次比个数,同一级别个数多的优先级高,如果个数相同则向后比较
!important级别最高
继承级别最低
22.不同元素特性
块级元素:独占一行,默认宽度是父级100%,加宽高生效 比如div
行内元素:一行共存多个,宽度由内容撑开,加宽高不生效 比如span,加line-height可以改变垂直位置,margin和padding不能改变;
行内块元素:一行共存多个,宽度由内容撑开,加宽高生效 比如img
转换显示模式:
display:block 转为块级
display:inline-block 转为行内块
display:inline 转为行内
23 常用软件
pxcook 支持psd文件的文字,颜色,距离自动智能识别
24 盒子模型
padding:内边距 (内容与盒子边缘)
border:边框线
margin:外边距 (盒子外面,通常用于拉开两个盒子的距离)
盒子尺寸=内容尺寸+border尺寸+内边距尺寸
设置宽高本身是内容宽高,如果想要等于盒子宽高,加box-sizing:border-box即可
25 内容溢出
overflow:hidden 溢出隐藏
aoto 溢出滚动
scroll:不管是不是溢出都有滚动条
26 版心居中
margin:0 auto;
用auto的时候必须设置宽度
27 外边距合并与塌陷
合并:两个盒子垂直排列,如果都设置了垂直方面外边距,不会相加,而是取较大值;
塌陷:父子级盒子,设置子级的margin-top,不会让子级与父级添加上面的间距,而是会把父级往下拽.
想实现父子之间间距,可以给父级设置内边距 padding-top,子级的margin-top不要,
或者要子级的margin-top,父级设置overflow:hidden,
或者要子级的margin-top,父级设置 border-top
28 css推荐顺序
盒子模型,文字,最后圆角阴影
29 浮动 float
作用:让块级元素在一行排列显示
特点:浮动后的盒子顶对齐,
具有行内块的特点,
父级宽度不够,浮动的子级会换行,
浮动后的盒子会脱标
清除浮动:子级浮动,父级没有高度时,子级无法撑开父级高度导致错乱.为了解决这一问题,
使用双伪元素法.
30 弹性布局 flex
创建flex容器:display:flex
主轴对齐默认水平方向:justify-content
侧轴对齐默认垂直方向:align-items
某个弹性盒子侧轴对齐:align-self
修改主轴方向:flex-direction
弹性伸缩比即占用父级剩余尺寸占比:flex
弹性盒子换行:flex-wrap
行对齐:align-content
31 定位
相对定位:position:relative
位置的参照物是自己原来的位置;
不脱标,占位;
标签显示模式不变;
绝对定位:position:absolute
子级绝对定位,父级相对定位
脱标,不占位;
参照物:先找最近的已经定位的祖先元素,如果所有祖先元素都没有定位,参照浏览器可视区域
改位置
显示模式特点改变:宽高生效(具备行内块的特点)
定位居中:绝对定位
水平,垂直边偏移为50%
子级向左,上移动自身尺寸的一半
左上的外边距为 负尺寸的一半
固定定位:position:fixed
元素在网页滚动时不改变位置
脱标,不占位
参照物:浏览器窗口
显示模式特点:行内块的特点
轮播图有箭头用子绝父相
32 过渡transition
透明度:opacity 0为透明
光标类型:cursor 鼠标样式 默认箭头
网站最上方标题图标:favicon
平面转换(2d转换):transform 与transition结合使用
用于改变图片大小,移动等效果
空间转换(3d转换):transform:translate3d(x,y,z)
动画:animation
定义:
@keyframes 动画名称{
from{}
to{}
}
或者
@keyframes 动画名称{
0%{}
10%{}
100%{}
}
