[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.replies",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"replies",[34],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":30,"_31":16,"_32":33},"loginname","yangshipo","page",1,"limit",50,"total","id","32511","avatar_url","https://avatars2.githubusercontent.com/u/13846615?v=4","githubUsername","create_at","2018-03-24 09:53:25.052","score",5,"topic_count",0,"reply_count","is_star",false,{"_20":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":33,"_47":33,"_31":48,"_49":50,"_25":51,"_52":53},"23967","author_id","11959","tab","share","content","vue-router 是 Vue.js 官方的路由库，本着学习的目的，我对 vue-router 的源码进行了阅读和分析，分享出来给其他感兴趣的同学做个参考吧。\r\n\r\n## 参考\r\n\r\n- 源码：[vuejs/vue-router v2.2.1 - github](https://github.com/vuejs/vue-router)\r\n- 文档：[vue-router 官方中文教程](http://router.vuejs.org/zh-cn/index.html)\r\n\r\n## 初步\r\n\r\n我们分别从不同的视角来看 vue-router。\r\n\r\n- 从开发者角度来看，是这样的：\r\n\r\n```javascript\r\nvar router = new VueRouter({\r\n routes: [\r\n {path: '/foo', component: {template: '

FOO

'}},\r\n {path: '/bar', component: {template: '

BAR

'}}\r\n ]\r\n})\r\n\r\nvar vm = new Vue({\r\n el: '#app',\r\n router: router\r\n})\r\n```\r\n\r\n我们创建一个 ```router```，传入的 ```routes``` 中的每一项即为一条路由（route）配置，表示在匹配给定的地址时，应该使用什么组件渲染视图。\r\n\r\n将 ```router``` 传入 ```new Vue()``` 用于创建根组件，这样根组件中对应的视图区域，可以基于 ```router``` 中的配置，根据页面地址显示不同的内容。当然，这还需要在组件模板中使用 `````` 来定义区域。\r\n\r\n- 从视图角度来看，是这样的：\r\n\r\n```html\r\n

\r\n ...\r\n \r\n ...\r\n

\r\n```\r\n\r\n页面地址变更后，`````` 对应的区域会更新为地址匹配的组件。例如，路径是 ```/foo``` 则对应区域显示 FOO，路径是 ```/bar``` 则显示 BAR，路径没有匹配的组件时，则不显示内容。\r\n\r\n- 从数据角度来看，是这样的：\r\n\r\n```\r\nvm\r\n+ _router | $router\r\n - history\r\n - matcher\r\n+ _route | $route\r\n - matched\r\n```\r\n\r\n```vm.$router``` 引用当前组件对应的 ```router``` 对象，该对象在初始化时（在 ```vm``` 创建过程中执行初始化），会启动对页面地址变更的监听，从而在变更时更新 ```vm``` 的数据（```$route```），进而触发视图的更新。\r\n\r\n## 深入\r\n\r\n**如何实现对地址变更的监听？**\r\n\r\n对于缺省的 ```HashHistory``` 模式（也就是基于页面地址的 hash 部分来实现路由功能，如 ```http://example.com/path#/foo```、```http://example.com/path#/bar```），是通过监听 ```hashChange``` 事件来实现：\r\n\r\n```javascript\r\nwindow.addEventListener('hashchange', () => {\r\n // this.transitionTo(...)\r\n})\r\n```\r\n\r\n[源码](https://github.com/vuejs/vue-router/blob/v2.2.1/src/history/hash.js#L21)\r\n\r\n这个动作是什么时候执行的呢？\r\n\r\n是在 ```router.init()```（[源码](https://github.com/vuejs/vue-router/blob/v2.2.1/src/index.js#L103)）中调用的，而 ```router.init()``` 则是在根组件创建时（[源码](https://github.com/vuejs/vue-router/blob/v2.2.1/src/install.js#L24)）调用的。\r\n\r\n而 Vue 组件在创建时，又怎么会去调用 ```router.init()``` 呢？\r\n\r\n这是由于 vue-router 将自身作为一个插件安装到了 Vue，通过 ```Vue.mixin()``` 注册了一个 ```beforeCreate()``` 钩子函数，从而在之后所有的 Vue 组件创建时都会调用该钩子函数，给了检查是否有 ```router``` 参数，从而进行初始化的机会。进而通过层层调用执行了监听 ```hashchange``` 事件的动作。\r\n\r\n整理一下：\r\n- ```new Vue()```\r\n- 执行 vue-router 注入的 ```beforeCreate``` 钩子函数\r\n- 执行 ```router.init(vm)```\r\n- 执行 ```history.setupListeners()```，注册事件监听\r\n\r\n**地址变更如何通知到 ```vm```？**\r\n\r\n这个过程比较简单，```hashchange``` 时，执行 ```history.transitionTo(...)```，在这个过程中，会进行地址匹配，得到一个对应当前地址的 ```route```，然后将其设置到对应的 ```vm._route``` 上。\r\n\r\n只是进行了赋值，为什么 ```vm``` 就可以感知到路由的改变了呢？\r\n\r\n答案在 vue-router 注入 Vue 的 ```beforeCreate``` 钩子函数中（[源码](https://github.com/vuejs/vue-router/blob/v2.2.1/src/install.js#L25)）：\r\n\r\n```javascript\r\nVue.util.defineReactive(this, '_route', this._router.history.current)\r\n```\r\n\r\n采用与 Vue 本身数据相同的“数据劫持”方式，这样对 ```vm._route``` 的赋值会被 Vue 拦截到，并且触发 Vue 组件的更新渲染流程。\r\n\r\n**地址变更如果同步视图更新？**\r\n\r\n接上一步，```vm._route``` 已经接收到路由的变更，从而触发视图更新。而当视图更新进一步调用到 `````` 的 ```render()``` 时，即进入了 `````` 的处理（[源码](https://github.com/vuejs/vue-router/blob/v2.2.1/src/components/view.js#L12)）。\r\n\r\n`````` 的 ```render()``` 采用函数调用（```h()```）模式，而非通过模板生成。这也是 Vue2 支持的定义组件渲染逻辑的方式，类似 React 的 ```render()```。采用这种模式的好处是可以完全利用 JavaScript 的能力来编写逻辑，不必受制于 Vue 的类 HTML 模板语法。\r\n\r\n这里的主要处理逻辑是从根组件中取出当前的路由对象（```parent.$route```），然后取得该路由下对应的组件，然后交由该组件进行渲染：\r\n\r\n```javascript\r\nreturn h(component, data, children)\r\n```\r\n\r\n这其中还涉及 `````` 嵌套的处理，不过主要逻辑就是这样了。\r\n\r\n## 小结\r\n\r\n其实 vue-router 从 `````` 的实现来看，就是一个具有特定功能的 Vue 组件而已，不过要配合根组件的 router 发挥作用。但整体还是很“响应式”的，也是蛮“Vue风格”的。\r\n\r\nvue-router 以插件方式“侵入”Vue，从而支持一个额外的 ```router``` 属性，以提供监听并改变组件路由数据的能力。这样每次路由发生改变后，可以同步到数据，进而“响应式”地触发组件的更新。\r\n\r\n`````` 作为根组件下的子组件，从根组件那里可以获取到当前的路由对象，进而根据路由对象的组件配置，取出组件并用其替换当前位置的内容。这样，也就完成整个路由变更到视图变更的过程。\r\n\r\n路由变更到视图变更的过程整理为：\r\n\r\n```\r\nhashchange\r\n-->\r\nmatch route\r\n-->\r\nset vm._route\r\n-->\r\n render()\r\n-->\r\nrender matched component\r\n```\r\n\r\n实现过程中的技术点包括：\r\n- Vue 插件机制\r\n- 响应式数据机制\r\n- Vue 渲染机制\r\n- 地址变更监听","title","vue-router 实现分析","last_reply_at","2018-06-22 07:13:22.873","good","top",4,"visit_count",21405,"2017-03-25 14:38:01.352","author",{"_13":54,"_22":55},"luobotang","https://avatars.githubusercontent.com/u/4198591?v=3"]