前端面试题vue—(vue-router实现原理；Vue响应式原理；SPA路由history刷新404问题)

vue-router实现原理

vue-router提供三种路由模式
1.hash模式
默认模式，通过路径中的hash值来控制路由跳转，不存在兼容问题
hash模式实现原理
在正常路径后跟一个 # 号，匹配 # 后边的路径为前端路由，通过window.onhashchange方法来操控路由改变的时候切换内容
2.history模式
H5新增的 history API，相对hash而言，不会显示#号，但是需要服务器端配置
history模式实现原理
看起来与后端路由没有任何区别，在window.history这个对象中，包含浏览器的历史，而在HTML5中，新增了pushState和replaceState，通过这两个API可以改变url地址且不会发送请求，同时还有popstate事件，实现原理与hash相似，只不过因为没有了 # 号，所以刷新页面还是会向服务器发送请求，而后端没有对应的处理措施的话，会返回404，所以需要后端配合
3.abstract模式
abstract模式实现原理
支持javascript的所有运行环境，常指Node.js服务器环境
abstract模式是不依赖于浏览器环境的一种模式，它是VueRouter内部使用数组进行模拟了路由管理，在node环境，或者原生App环境下，都会默认使用abstract模式，VueRouter内部会根据所处的环境自行判断，默认使用hash模式，如果检测到没有浏览器API的时候，就会使用abstract模式

Vue响应式原理

当一个Vue实例创建时，vue会遍历data选项的属性，用 Object.defineProperty 将它们转为
getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。
每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，
之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

SPA路由history刷新404问题

• 在配置config里路径找不到 添加一个点
• SPA 路由History模式

刷新404，为什么，因为本地路径中没有这个真实资源存在，这些访问资源都是在js里渲染的。
我们只需要在服务器配置如果URL匹配不到任何静态资源，就跳转到默认的index.html
解决方案：在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html
页面，这个页面就是你 app 依赖的页面。同时这么做以后，服务器就不再返回 404 错误页面，因为对于所有路径都会返回
index.html 文件。为了避免这种情况，在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。或者，如果是
用 Node.js 作后台，可以使用服务端的路由来匹配 URL，当没有匹配到路由的时9候返回 404，从而实现后退。