update vue-router annotations

Author: answershuto

docs/Vuex源码解析.MarkDown

@@ -2,7 +2,7 @@
 
 我们在使用Vue.js开发复杂的应用时，经常会遇到多个组件共享同一个状态，亦或是多个组件会去更新同一个状态，在应用代码量较少的时候，我们可以组件间通信去维护修改数据，或者是通过事件总线来进行数据的传递以及修改。但是当应用逐渐庞大以后，代码就会变得难以维护，从父组件开始通过prop传递多层嵌套的数据由于层级过深而显得异常脆弱，而事件总线也会因为组件的增多、代码量的增大而显得交互错综复杂，难以捋清其中的传递关系。
 
-那么为什么我们不能将数据层与组件层抽离开来呢？把数据层放到全局形成一个单一的Store，组件层变得更薄，专门用来进行数据的展示及操作。所有数据的操作都需要经过全局的Store来进行，形成一个单向数据流，使数据变化变得“可预测”。
+那么为什么我们不能将数据层与组件层抽离开来呢？把数据层放到全局形成一个单一的Store，组件层变得更薄，专门用来进行数据的展示及操作。所有数据的变更都需要经过全局的Store来进行，形成一个单向数据流，使数据变化变得“可预测”。
 
 Vuex是一个专门为Vue.js框架设计的、用于对Vue.js应用程序进行状态管理的库，它借鉴了Flux、redux的基本思想，将共享的数据抽离到全局，以一个单例存放，同时利用Vue.js的响应式机制来进行高效的状态管理与更新。正是因为Vuex使用了Vue.js内部的“响应式机制”，所以Vuex是一个专门为Vue.js设计并与之高度契合的框架（优点是更加简洁高效，缺点是只能跟Vue.js搭配使用）。具体使用方法及API可以参考[Vuex的官网](https://vuex.vuejs.org/zh-cn/intro.html)。
 

vue-router-src/index.js

@@ -15,6 +15,7 @@ import { AbstractHistory } from './history/abstract'
 
 import type { Matcher } from './create-matcher'
 
+/* 导出的VueRouter对象，用来包装store */
 export default class VueRouter {
   static install: () => void;
   static version: string;
@@ -34,6 +35,7 @@ export default class VueRouter {
 
   constructor (options: RouterOptions = {}) {
     this.app = null
+    /* 保存vm实例 */
     this.apps = []
     this.options = options
     this.beforeHooks = []
@@ -80,20 +82,25 @@ export default class VueRouter {
     return this.history && this.history.current
   }
 
+  /* 初始化 */
   init (app: any /* Vue component instance */) {
+    /* 未安装就调用init会抛出异常 */
     process.env.NODE_ENV !== 'production' && assert(
       install.installed,
       `not installed. Make sure to call \`Vue.use(VueRouter)\` ` +
       `before creating root instance.`
     )
 
+    /* 将当前vm实例保存在app中 */
     this.apps.push(app)
 
     // main app already initialized.
+    /* 已存在说明已经被init过了，直接返回 */
     if (this.app) {
       return
     }
 
+    /* this.app保存当前vm实例 */
     this.app = app
 
     const history = this.history

vue-router-src/install.js

@@ -16,7 +16,7 @@ export function install (Vue) {
   /* 判断是否已定义 */
   const isDef = v => v !== undefined
 
-  /* 注册router实例 */
+  /* 通过registerRouteInstance方法注册router实例 */
   const registerInstance = (vm, callVal) => {
     let i = vm.$options._parentVnode
     if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {
@@ -34,11 +34,15 @@ export function install (Vue) {
         this._routerRoot = this
         /* 保存router */
         this._router = this.$options.router
+        /* VueRouter对象的init方法 */
         this._router.init(this)
+        /* Vue内部方法，为对象defineProperty上在变化时通知的属性 */
         Vue.util.defineReactive(this, '_route', this._router.history.current)
       } else {
+        /* 非根组件则直接从父组件中获取 */
         this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
       }
+      /* 通过registerRouteInstance方法注册router实例 */
       registerInstance(this, this)
     },
     destroyed () {

vue-router-src/util/route.js

@@ -49,6 +49,7 @@ function clone (value) {
 }
 
 // the starting route that represents the initial state
+/* 起始路由 */
 export const START = createRoute(null, {
   path: '/'
 })