前端常见面试题3

1.数据响应

数据响应式式的原理

1. 所谓的数据响应式指的是数据变了,视图跟着变
2. 总结成一句话:就是利用Object.defineProperty数据劫持和观察者模式来实现的
3. 我们vue内部把data中对象进行了转换,把所有的属性递归实现了劫持Object.defineProperty,每个数据创建一个Dep被观察者
4. 对模板进行编译compiler提取里面所有的需要数据的地方变成watcher 把watch加入到对应的Dep的观察者列表中
   5. 当某个data中属性变化的时候,由于被劫持了,所以vue内部是知道的,调用对应的dep去通知观察者列表中所有的观察者
   6. 观察者就去更新视图
   

数据响应相关原因

1. 为什么data中数据变了,vue怎么知道? -> 数据劫持 Object.defineProperty
2. 数据变了一个,为什么组件中一堆用到这个数据的地方全变了? -> 观察者模式 这是一对多的关系
3. 为什么数据必须在data中初始化,后添加的为什么不是响应式 -> 因为vue在初始化的时候会把data中属性全部变成Object.defineProperty写法 后添加没有转换 所以就不是响应式(错过了初始化转换的时机)
4. 为什么数组的索引不是响应式的 为什么要用this.$set 来处理(vue官方基于性能的考虑,所以没有对数组进行转换,但是为我们提供了$set实现响应变化)

2.nextTick

nextTick就是vue通过异步队列控制DOM更新和nextTick回调函数先后执行的方式。

vue是异步修改DOM并且不鼓励开发者直接接触DOM，vue的DOM更新是异步的，而不是同步的，因为如果是同步的话，当我们频繁修改状态时，DOM需要被频繁更新，这是不行的。但有时必须要对修改后数据的DOM进行立即更新，这时就需要使用nextTick。

3.虚拟DOM

虚拟dom就是一个js对象，用来渲染真实的dom。

真实dom上包含许多方法和属性，操作起来性能比较差，数据改变时会造成页面频繁的重绘和回流。而频繁操作虚拟dom不会存在性能问题，等所有数据更新完后，修改真实dom树需要修改的地方。而且只会重绘回流一次。

组件在创建时，会根据渲染数据创建出一个虚拟dom，当数据更新时，会再创造出一个虚拟dom，直到数据不会再改变，用广度优先对新旧dom进行同层对比。通过diff算法判断节点是否发生改变，当节点发生改变时更新整个节点，当节点没发生改变，只改变属性时，复用该节点，只更新属性，真实dom只更新改变的部分。当在有v-for的情况下，如果没有key或是key为index的情况下，如果存在sort ，unshift的话，会造成不必要的更新。

虚拟dom在vue中的实现并不是虚拟dom的主要作用。虚拟dom可以实现跨平台，跨终端，因为虚拟dom其实就是js对象，如果是android系统，渲染成相应的android的ui代码，如果是html的浏览器就渲染成真实的dom。

4.数组常用方法

foreach
用于遍历数组的每个元素，将元素传递给回调函数，原数组不变。
some
用于对数组的每一项进行判断，是否有满足条件的，如果有满足条件的就返回true，停止继续判断，如果没有满足条件的，返回false，原数组不变。
indexof
用于判断数组中是否有满足条件的元素，如果有就返回该元素在数组中的下标，如果没有则返回-1
every
用于判断数组中是否所元素都满足条件，如果所有元素都满足条件，则返回true；若有一项不满足条件，则返回false，停止继续执行，原数组不变
map
是对数组元素的一一映射，对数组的每项进行遍历，并进行相关运算，返回return一个新数组，不影响原来的素组，新数组长度一定与原数组长度相同。
filter
对数组中的数据进行过滤,对数组中每一项进行遍历，进行相关判断，满足条件的元素被返回到新数组中
reduce
其原理就是将本次计算结果作为返回值return传给回调函数，作为下次计算的参数。最终汇总成一个结果，返回一个值。per为上次计算结果返回值，一般初始值设为0，如果没有传，则拿第一项作为初始值；cir为当前元素值；curIndex为当前处理元素的索引值

const arr = [1,2,3,4,5]
const total = arr.reduce(function(per,cir，curIndex){
return per + cir
},per)
console.log(total)

5.本地存储

cookie:大小为4kb，默认自己添加的cookie，当当前会话关闭，页面关闭，或浏览器关闭就会失效，如果是服务器携带的cookie可以手动修改。可以参与通信，在每次发送请求时，都会携带在http请求头中，在易用层面上很不友好，当获取cookie时，会获取到cookie的整个字符串。

Localstorage,Sessionstorage：大小为5-20mb，在Localstorage中存储的数据，除非手动清除，不然永远存在，而Sessionstorage中存储的数据，当页面或浏览器关闭时就会失效。不参与通信，在易用层面上还可以，不过Localstorage和Sessionage只能存储字符串，在存储时，需要通过JSON.stringsfy()来进行转换。

6.权限控制

权限控制分为：路由权限控制(页面控制)；菜单权限控制；按钮权限控制

路由权限是有的用户有权访问全部页面，而有的用户只能访问到部分页面。这就是由静态路由和动态路由决定的，前端路由维护了两份路由表，一份是静态路由表，一份是动态路由表。静态路由是直接在router路由表上挂载的，所有用户都可以看到，而动态路由表则是通过addrouter添加上去。

菜单权限一般是由后端数据通过v-for渲染出来的侧边栏，，有的用户能全看到，而有的只能看到部分。而侧边栏是通过当前用户自己的路由表用v-for渲染出来的。

按钮权限一般在一个页面上会存在一些操作，如添加，删除等，有的用户能操作全部功能，而有的用户只能操作其中某些功能。用户在登录后会得到一份权限点列表，里面记录页面上的各个操作能否执行的标识，可以创建一个混入模式mixin，在里面判断当前页面的权限点是否在权限点列表中，如果存在可以进行操作，如果不存在则隐藏。