1.一个图片如何实现居中
<div class="box">
<img src="../../assets/1.png" alt="" class="imgCenter">
</div>
.box{
width: 400px;
height: 400px;
border: 1px solid red;
position: relative;
}
.imgCenter{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.box{
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 400px;
height: 400px;
border: 1px solid red;
position: relative;
}
.imgCenter {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.box {
width: 400px;
height: 400px;
border: 1px solid red;
text-align: center;
line-height: 400px;
}
.imgCenter {
vertical-align: middle;
}
2.原生事件类型以及节点操作
1.事件的方法以点击事件为例
btn.onClick = function(){}
btn.addEventListerner(事件类型，回调方法)
2.节点操作者
查找父节点 parentNode
查找子节点 children只返回节点 childNodes返回节点以及文本换行符等等
查找元素 就是 querySelector() getElementById()
创建节点 createElement()
追加节点 appendChild()
删除节点 removeChild(要删除的元素) u1.removeChild(li7) li7.remove()删除自己
3.数组方法
1. arr.pop() 删除数组最后一项
arr.shift() 删除数组第一项 都返回被删除的元素
push() 增加数组 返回数组长度
arr.unshift() 前面插入一个字符 返回数组长度
2.arr.find() 返回找到的符合条件的第一个元素
arr.findIndex() 返回找到的符合条件的第一个元素下标
3.every() 有一个不满足条件的就为false
some() 有一个满足条件的就为true
fill(value ,star ,end ) 将从下标为star到下标为end 的值换成 value
includes(2) 判断数组中查找某个元素 找到为true 否则为false
indexOf(2) 查找某个元素 从前往后找 找到返回下标 否则为-1
lastIndexOf(3) 查找某个元素从后往前找 找到返回下标 否则为-1
join('-')将数组转为字符串 以-为分隔符 1-2-3-4-5-6-7-8-9
forEach((item,index,arr)=>{}) 就是一个循环 没有返回值 newArr = undefined
map () 遍历数组 有返回值 返回值为一个数组
filter() 过滤函数 返回满足条件的属性值 新数组
reduce(a,b=>a+b) 遍历数组 ，第一个值为上一个返回值 第二个为当前属性
reverse() 数组翻转 改变原数组
arr.slice(1,5) 数组切割 返回切割出来的数组 原数组不变
newArr = arr.splice(1,3 ,99) 数组删除从下标为1到下标为3的元素 放入99 可以不写99 也可以实现数组元素替换
4.闭包
函数嵌套函数，且内部函数调用父级作用域的变量就可以称之为闭包
闭包的优点可以读取外层函数内部的变量。延长局部变量的生命周期，实现变量数据共享。
缺点是由于闭包执行完成之后会把外层函数中的变量保存到了内存中，消耗内存，以及数据泄漏，存在安全隐患所以不能滥用闭包否则影响性能。
最好的方法就是在退出函数之前，将不使用的局部变量全部删除，这样减少内存消耗，优化性能
闭包的应用场景：防抖，节流，计时器
5.封装一个组件需要注意的事情
首先我们要注意一下是UI组件还是业务组件 。在UI组件中我们要注意不能写业务，要将逻辑代码提出来 ，考虑组件的复用性以及通用性。所以我们就要用到组件prop传值。其实就是我们要考虑代码的可读性以及向上向下兼容性。
Vue组件的API主要包含三部分：prop、event、slot
1.prop 是父组件向子组件传值
但是 prop是单向数据流 要注意不可以在子组件中更改prop传来的值
2.event 是子组件向父组件传递消息的重要途径；
3.slot可以给组件动态插入一些内容或组件，是实现高阶组件的重要途径；当需要多个插槽时，可以使用具名slot
6. vuex
Vuex仅仅是Vue的一个插件。Vuex只能使用在vue上，因为其高度依赖于Vue的双向绑定和插件系统。
vuex是一个状态管理工具。里面包含 5 种 属性State、 Getter、Mutation 、Action、 Module。
state是一个单一状态树 ，存放了数据 。
Getter类似于Vue的 computed 对象。是根据业务逻辑来处理State，使得生成业务所需的属性。
Mutation是唯一用来更改Vuex中数据的方法 ，使用commit修改state中的数据。
Action是用来解决异步操作而产生的，它提交的是Mutation。
Module是将Vuex模块化的对象，目的是更好的维护。
注意：在刷新网页后，保存在vuex实例store里的数据会丢失 我们可以存放在本地存储中
7. vue的diff算法
diff 算法是一种通过同层的树节点进行比较的高效算法 ，Diff算法实现的是最小量更新虚拟DOM
其有两个特点：
比较只会在同层级进行, 不会跨层级比较
在diff比较的过程中，循环从两边向中间比较
diff 算法的在很多场景下都有应用，在 vue 中，作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较
原理分析：
当数据发生改变时，订阅者watcher就会调用patch给真实的DOM打补丁
通过isSameVnode进行判断，相同则调用patchVnode方法
patchVnode做了以下操作：
找到对应的真实dom，称为el
如果都有都有文本节点且不相等，将el文本节点设置为Vnode的文本节点
如果oldVnode有子节点而VNode没有，则删除el子节点
如果oldVnode没有子节点而VNode有，则将VNode的子节点真实化后添加到el
如果两者都有子节点，则执行updateChildren函数比较子节点
updateChildren主要做了以下操作：
设置新旧VNode的头尾指针
新旧头尾指针进行比较，循环向中间靠拢，根据情况调用patchVnode进行patch重复流程、调用createElem创建一个新节点，从哈希表寻找 key一致的VNode 节点再分情况操作
8.说一下原型链
原型：prototype 是函数的一个属性
原型链：__proto__ 他是对象的一个属性 也是一个对象
对象中除了私有属性外，还会有一条以原型为节点通过__proto__连接起来的链条，对象访问对象的某个属性的时候，如果对象的私有属性ownpoperty 不存在，就会沿着对象的__proto__上面去找，直到找到Object.prototype == null这就是原型链
9.精度丢失
在进行数字计算的时候 ，一般是用来后端直接返回给我们的，前端不进行数字计算，因为前端进行数字计算会导致精度丢失
原因：
0.1和0.2在转换成二进制后会无限循环，由于标准位数的限制后面多余的位数会被截掉，此时就已经出现了精度的损失，
相加后因浮点数小数位的限制而截断的二进制数字在转换为十进制就会变成 0.30000000000000004。
其实本质就是 二进制模拟十进制进行计算时 的精度问题。
解决办法：
1.转为 整数进行计算 但是对大数挺不友好的 。
( 0.1* 10 + 0.2 * 10 ) /10
2.转为 toFixed(2)这种
(0.1 + 0.2).toFixed(2)，但是转为的是字符串 0.3 ===>不推荐
3.浏览器自带的这个应该挺好用的 还不用考虑兼容性
Number(new Intl.NumberFormat('en-US').format(0.1 + 0.2))
4. 利用第三方库 --（没试验过）
Math.js ....
