心心念念的技术难题（前端面试题4）

导航

以后每天还要更新博客，四哥给的压力好大，毕竟，班里已经没有人可以骂了。

1.Vue响应式原理

Vue响应式底层实现方法是 Object.defineProperty() 方法，该方法中存在一个getter和setter的可选项，可以对属性值的获取和设置造成影响

而且Vue中编写了一个watcher（音译：哇奇儿）来处理数据

在使用getter方法和setter方法时，数据一旦发生变化，就会通知watcher实例对view层渲染页面。

2.SPA路由为history刷新404，为什么？如何解决

出现问题：在使用history模式的时候，由于浏览器路径与后端路径类似，所以当刷新页面的时候，浏览器还是会向服务器发送请求，但是由于服务器并没有对应的路由页面，所以会导致404

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

配置方案：强烈推荐第三种，因为前两种俺不会。(附上链接:https://router.vuejs.org/zh-cn/essentials/history-mode.html)

3.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模式。

今天是光棍节，俺要买个光棍玩具儿玩玩儿