前端试题-VUE篇

1. react与vue的比较

相同点：都支持服务器端渲染；
              都有Virtual和DOM，组件化开发，父子组件数据可传递，都实现了webComponent规范
              数据驱动视图
              都有支持native的方案。
不同点：react严格上只针对MVC的view层，Vue则是MVVM模式；
             virtualDOM不一样，vue会跟踪每个组件的依赖关系，不用重新渲染整个组件树；而react，每当应用状态被改变时，全部组件都会被重新渲染
              组件写法不一样，react是all in js,即把所有的HTML和CSS全部写入JavaScript。Vue是单文件组件格式，HTML，css和jd写同一个文件。
             数据绑定：react数据流是单相，vue是双向的。

2. vue-router的两种模式：hash模式和history模式

hash模式：vue-router默认的就是hash模式。用URL的hash来模拟一个完整的URL页面。当URL改变时，页面不会重新加载，就是单页面应用。
history模式：主要用HTML5的pushState()和replaceState()这两个api来实现。pushState（）改变URL地址且不会发送请求；replaceState（）可以读取历史记录栈，也可以对浏览器记录进行修改。
区别：hashchange只能改变#后面的url片段；pushState则将URL修改的和正常请求后端的URL一样，若后端配置没有对应的路由处理，则会返回404错误。
hash模式下对后端来说即使没有做到对路由的全覆盖，也不会返回404错误；history模式下，前端的URL必须与实际后端发起请求的url一致。

3. token失效处理：

方案1：服务器端保存token状态，用户每次操作都会自动推迟token的过期时间。但当前后端分离，单页面的时候每秒钟的请求发起多次，每次都刷新过期时间是非常消耗性能的。
方案2：使用refresh token，避免频繁刷新token。此时服务器只要在token过期的时候反馈给前端，前端使用refresh token申请一个全新的token继续使用即可。

4. vuex状态管理刷新页面数据失效：

store中的数据是保存在运行内存中的，页面刷新的时候会重新加载vue实例，store中的数据会被重现赋值，因此数据就丢失了。
利用localStorage/sessionStorage将数据存储在外部，做一个持久化存储。

5. 虚拟dom以及key属性的作用：

在浏览器中操作dom是很昂贵的，频繁的DOM操作会产生一定的性能问题。于是产生了虚拟DOM。
虚拟DOM的实现原理：
用JS对象模拟真实的DOM树，对真实的DOM进行抽象
Diff算法-比较两个虚拟的DOM树之间的差异；pach算法-将两个虚拟DOM对象差异应用到真实的DOM树
key是vue中vnode的唯一标记，通过key，我们的diff操作更准确、更快速。

6. 为什么vuex的mutation中不能做异步操作：

vuex中所有的状态更新的唯一途径就是mutation，每个mutation执行完之后都会对应到一个新的状态变更，这样devtools就可以打个快照保存下来，然后就可以实现time-travel了。如果支持异步操作，就无法知到状态是何时更新，无法更好的进行状态的追踪，给调试带来困难。