屏幕尺寸、屏幕分辨率-->对角线分辨率/屏幕尺寸-->屏幕像素密度PPI
                                             |
              设备像素比dpr = 物理像素 / 设备独立像素dip(dp)
                                             |
                                       viewport: scale
                                             |
                                          CSS像素px

const routes = [
  { path: '/foo',name:'foo', component: Foo,children:[{ path: '/bar2/:id?',name:'bar2', component: Foo1 }]}
]
const routes1 = [
  { path: '/foo',name:'foo', component: Foo ,children:[{ path: '/bar21/:id?',name:'bar21', component: Foo2 }]},
]
const router = new VueRouter({
  routes
})
router.addRoutes(routes1)

function addRoutes (routes) {
  createRouteMap(routes, pathList, pathMap, nameMap);
}

routes.forEach(function (route) {
  addRouteRecord(pathList, pathMap, nameMap, route);
});

function addRouteRecord ( pathList, pathMap, nameMap ) {
  //如果有子路由，递归添加到路由表中
  if (route.children) {
    route.children.forEach(function (child) {
      var childMatchAs = matchAs
        ? cleanPath((matchAs + "/" + (child.path)))
        : undefined;
        console.log(childMatchAs)
      addRouteRecord(pathList, pathMap, nameMap, child, record, childMatchAs);
    });
  }

  if (!pathMap[record.path]) { 关键！！！！！！详见下文
    pathList.push(record.path);
    pathMap[record.path] = record;
  }

  if (name) {
    if (!nameMap[name]) { 
      nameMap[name] = record;
    } else if ( !matchAs) { //直接警告，不更新
      warn(
        false,
        "Duplicate named routes definition: " +
          "{ name: \"" + name + "\", path: \"" + (record.path) + "\" }"
      );
    }
  }
}

router.addRoutes(routes: Array<RouteConfig>)
动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。

History.prototype.confirmTransition = function confirmTransition (route, onComplete, onAbort) {
var queue = [].concat(
  // in-component leave guards
  extractLeaveGuards(deactivated),
  // global before hooks
  this.router.beforeHooks,
  // in-component update hooks
  extractUpdateHooks(updated),
  // in-config enter guards
  activated.map(function (m) { return m.beforeEnter; }),
  // async components
  resolveAsyncComponents(activated)
);

this.pending = route;
var iterator = function (hook, next) {
  if (this$1.pending !== route) {
    return abort()
  }
  try {
    hook(route, current, function (to) { 
      if (to === false || isError(to)) {
        // next(false) -> abort navigation, ensure current URL
        this$1.ensureURL(true);
        abort(to);
      } else if (
        typeof to === 'string' ||
        (typeof to === 'object' &&
          (typeof to.path === 'string' || typeof to.name === 'string'))
      ) {
        // next('/') or next({ path: '/' }) -> redirect
        abort();
        if (typeof to === 'object' && to.replace) { 
          this$1.replace(to);
        } else { 
          this$1.push(to); //引起递归调用
        }
      } else {
        // confirm transition and pass on the value
        next(to);
      }
    });
  } catch (e) {
    abort(e);
  }
};
}
History.prototype.push = function push (location, onComplete, onAbort) {
  var this$1 = this;

  var ref = this;
  var fromRoute = ref.current;
  this.transitionTo(location, function (route) {
    pushState(cleanPath(this$1.base + route.fullPath));
    handleScroll(this$1.router, route, fromRoute, false);
    onComplete && onComplete(route);
  }, onAbort);
};
History.prototype.transitionTo = function transitionTo (
  location,
  onComplete,
  onAbort
) {
  var this$1 = this;
  var route = this.router.match(location, this.current);
  this.confirmTransition(...)
}

if(!hasMenus){
  hasMenus = true
  let temp = await createRoutes() //拿到数据
  router.addRoutes(temp) //添加路由
  if(!to.name){ //处理刷新，刷新时，当前页面name会变成null
    next({name:to.path.substring(1)})
  }
}
if (to.matched.some(res => res.meta.requireAuth)) {// 判断是否需要登录权限
  cookies.getAuthorization().then(token=>{
    if(!token){
      next({
        name: 'login',
        params: {from: to.name}
      })
    }else{
      next()
    }
  })
} else {
  next() //终止递归
}

zh-CN.js 简体中文
'开始日期': '开始日期',
'结束日期': '结束日期',

zh-TW.js 繁体中文
'开始日期': '開始日期',
'结束日期': '結束日期',

var fs = require('fs'); //引入文件处理模块
function read_file_sync(file_path) {
  var data = fs.readFileSync(file_path, 'utf-8'); //读取文件
  let arr = file_path.split('/')
  let len = arr.length
  let temp = arr[len-1].split('.')[0] 
  //获取文件名，如果待处理文件是子目录下的，保持生成的文本提取文件和新文件与原来文件保持相同目录结构
  let fileName = arr[len-2] === 'console'?temp:arr.slice(4,arr.length-1).join('/')+'/'+temp //子目录情况
  GetChinese(data,fileName)
}
read_file_sync('./src/components/console/san-manage.vue')

function GetChinese(strValue,fileName) { 
  if(strValue=== null || strValue === ""){ 
    return []
   }
  let originData = strValue
  let arr = getWords(originData) //提取简体中文
  let obj = {}
  arr.map(item=>{obj[item]=''})
  let str = JSON.stringify(obj,'',"  ")
  str = 'export default '+ str
  //生成文本文件
  fs.writeFile('./words/js/'+fileName+'.js', str,function(err){ 
    if(err) console.log('提取操作失败');
    else console.log('提取操作成功');
  });
  //添加i18n全局函数，替换老文件，生成新文件
  let index = originData.indexOf('<script>')
  let template = originData.substring(0,index)//这里仅替换VUE文件的template模板部分，因为js部分有时涉及到拼接处理，单独处理
  let templateResult = partTransfor(template) //得到替换结果
  let other = originData.substring(index)//获取vue文件里面的js部分
  //二者拼接写入新文件
  fs.writeFile('./words/vue/'+fileName+'.vue', templateResult+other, function(err){ 
    if(err) console.log('重写文件操作失败');
    else console.log('重写文件操作成功');
  });
}

function getWords(strValue,flag){
 //flag为true的时候，提取template部分简体中文，供替换使用
 //flag为false的时候，提取全部简体中文，二者正则不同
  var reg = flag? /\"?([0-9a-zA-Z\u4e00-\u9fa5|\-|\s|\(|\)\:\：\、\，\,\！\!\。])+/g : /(([0-9a-zA-Z]+)?[\u4e00-\u9fa5|\-|\s|\(|\)\、\，\,\:\：\！\!\。\~]([0-9a-zA-Z]+)?)+/g
  //匹配注释的正则，注释不用提取翻译，故提取前先移除
  let regCommon = /(\/\/[\w\s\,\，\‘\(\)\—\:\：\=\>\、\？\。a-zA-Z\.\u4e00-\u9fa5|\[|\]|-]*\n)|(\<\!\-\-[\w\s\‘\-\、a-zA-Z\u4e00-\u9fa5|\[|\]|-]*\-\-\>)|(\/\*[\w\‘\s\r\n\*\u4e00-\u9fa5|\-]*\*\/)/g
  strValue = strValue.replace(regCommon, function(word) { // 去除注释后的文本
    return ''
  });
  //优化提取结果，去重，过滤，排序
  let res = [...new Set(strValue.match(reg))].filter(item=>{return /([\u4e00-\u9fa5])+/g.test(item)}).map(item=>{return item.trim()})
  res = res.sort((a,b)=>{
    return b.length-a.length
  })
  return res
}

function partTransfor(strValue){
  let originData = strValue
  let res = getWords(strValue,true) //拿到template部分简体中文
  for(let str of res){
    let placeholder = str.charAt(0) ==='\"' 
    let temp = placeholder?str.substring(1):str
    let reg1 = new RegExp(str,'ig')
    let reg2 = new RegExp("placeholder=\"("+temp+")\"",'ig')
    let reg = placeholder?reg2:reg1
    originData = originData.replace(reg,function(word,str){
      if(placeholder){ //如果是placeholder部分的简体中文
        return ':placeholder="i18nTitle(\''+str+'\')"'
      }else{
        if(/[\u4e00-\u9fa5\:\']/.test(originData[str-1]) || /[\u4e00-\u9fa5\:\']/.test(originData[str+word])){ //对于一些包含特殊字符连接的手动处理
          return word
        }
        return '{{i18nTitle(\''+word+'\')}}' //对于纯简体中文用函数包裹进行替换
      }
    })
  }
  return originData
}

1.js里面用this.i18nTitle('xxx')
2.placeholder='xxx'改成:placehoder="i18nTitle('xxxx')"
3.单纯标签的这种，<label>xxxx</label>改成<label>{{i18nTitle(xxxx)}}</label>

var fs = require('fs');
var path = require('path');//解析需要遍历的文件夹
var filePath = path.resolve('./words/js');
var words = []
const getFileOfDirSync = (dir) => {
  let files = fs.readdirSync(dir);
  let result;
  if (files) {
    result = files.map((file) => {
      let filePath = path.join(dir, file);
      if (fs.statSync(filePath).isDirectory()) {
        return getFileOfDirSync(filePath); //递归
      } else {
        let content = fs.readFileSync(filePath, 'utf-8');
        content = content.replace('export default','module.exports =') //更改模块编写方法
        fs.writeFileSync(filePath,content);//方便读取
        let data = require(filePath)
        let keys = Object.keys(data)
        let comment = content.substring(0,content.indexOf('module'))
        return keys;
      }
    });
  }
  return [... new Set(result.flat(Infinity))]; //数组摊平去重
}
let res = getFileOfDirSync(filePath)
res = res.sort((a,b)=>{
  return b.length-a.length
})
let obj = {}
res.map(item=>{obj[item]=''})
//res.map(item=>{obj[item]=item}) //直接生成简体中文翻译文件
let str = JSON.stringify(obj,'',"  ")
str = 'export default '+ str
fs.writeFile('./words/cnAll1.js', str,function(err){
  if(err) console.log('提取操作失败');
  else console.log('提取操作成功');
});

let obj = {}
let ll = {}
let llkeys  = Object.keys({ //翻译结果
  '建議選擇購買當前雲裸機已掛載使用的存儲類型和磁盤類型':'',
  '超高端存儲：穩定性和安全性最好，適用於核心業務系統':'',
  '高端存儲：穩定性和安全性較好，適用於重要業務系統':'',
  '中端存儲：穩定性和安全性壹般，適用於壹般業務系統':'',
  '普通存儲：穩定性和安全性較差，適用於邊緣業務系統':'',
  'NVME：新壹代固態磁盤，性能最好、延時最低，適用於核心業務系統':'',
  'SSD：固態磁盤，性能較好、延時較低，適用於重要業務系統':'',
  'SAS：機械磁盤，性能壹般、延時壹般，適用於壹般業務系統':'',
  'SATA：機械磁盤，性能較差、延時較高，適用於邊緣業務系統和歸檔數據':'',
})
let objkeys = Object.keys({ //简体中文
  '建议选择购买当前云裸机已挂载使用的存储类型和磁盘类型':'',
  '超高端存储：稳定性和安全性最好，适用于核心业务系统':'',
  '高端存储：稳定性和安全性较好，适用于重要业务系统':'',
  '中端存储：稳定性和安全性一般，适用于一般业务系统':'',
  '普通存储：稳定性和安全性较差，适用于边缘业务系统':'',
  'NVME：新一代固态磁盘，性能最好、延时最低，适用于核心业务系统':'',
  'SSD：固态磁盘，性能较好、延时较低，适用于重要业务系统':'',
  'SAS：机械磁盘，性能一般、延时一般，适用于一般业务系统':'',
  'SATA：机械磁盘，性能较差、延时较高，适用于边缘业务系统和归档数据':'',
})
let tw = {}
objkeys.map((item,i)=>{
  tw[item] = llkeys[i] //生成繁体翻译文件
  obj[item] = item //生成简体中文
})

let str = JSON.stringify(tw,'',"  ")
str = 'export default '+ str
fs.writeFile('zh-TW.js', str,function(err){
  if(err) console.log('提取操作失败');
  else console.log('提取操作成功');
});

str = JSON.stringify(obj,'',"  ")
str = 'export default '+ str
fs.writeFile('zh-CN.js', str,function(err){
  if(err) console.log('提取操作失败');
  else console.log('提取操作成功');
});

let data = require('./words/zh-CN')
let keys = Object.keys(data) //老数据
let dataNew = require('./words/cnAll1') 
let keysNew = Object.keys(dataNew)//新页面数据
let obj = {}
let newWords = keysNew.filter(newkey=>{
   return !keys.includes(newkey)
}).map(item=>{
  obj[item]=item
  return item
})//得到新增的文本
let ll = {} //新增文本翻译结果
let llkeys  = Object.keys(ll)
let objkeys = Object.keys(obj)
let tw = {}
objkeys.map((item,i)=>{
  tw[item] = llkeys[i]
})
//生成简体和繁体翻译文件，再复制粘贴到老文件中
// let str = JSON.stringify(obj,'',"  ")
let str = JSON.stringify(tw,'',"  ")
str = 'export default '+ str
fs.writeFile('./words/compareResult3.js', str,function(err){
  if(err) console.log('提取操作失败');
  else console.log('提取操作成功');
});

Vue.prototype.$t = function (key) {
  var values = [], len = arguments.length - 1;
  while ( len-- > 0 ) values[ len ] = arguments[ len + 1 ];

  var i18n = this.$i18n;
  return i18n._t.apply(i18n, [ key, i18n.locale, i18n._getMessages(), this ].concat( values ))
};

VueI18n.prototype._getMessages = function _getMessages () { return this._vm.messages };

//this._vm.messages 值生成
VueI18n.prototype.setLocaleMessage = function setLocaleMessage (locale, message) {
  if (this._warnHtmlInMessage === 'warn' || this._warnHtmlInMessage === 'error') {
    this._checkLocaleMessage(locale, this._warnHtmlInMessage, message);
  }
  this._vm.$set(this._vm.messages, locale, message);
};

VueI18n.prototype.mergeLocaleMessage = function mergeLocaleMessage (locale, message) {
  if (this._warnHtmlInMessage === 'warn' || this._warnHtmlInMessage === 'error') {
    this._checkLocaleMessage(locale, this._warnHtmlInMessage, message);
  }
  this._vm.$set(this._vm.messages, locale, merge({}, this._vm.messages[locale] || {}, message));
};

VueI18n.prototype._t = function _t (key, _locale, messages, host) {
    var ref;

    var values = [], len = arguments.length - 4;
    while ( len-- > 0 ) values[ len ] = arguments[ len + 4 ];
  if (!key) { return '' }

  var parsedArgs = parseArgs.apply(void 0, values);
  var locale = parsedArgs.locale || _locale;

  var ret = this._translate(
    messages, locale, this.fallbackLocale, key,
    host, 'string', parsedArgs.params
  );
  if (this._isFallbackRoot(ret)) {
    if (!this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {
      warn(("Fall back to translate the keypath '" + key + "' with root locale."));
    }
    /* istanbul ignore if */
    if (!this._root) { throw Error('unexpected error') }
    return (ref = this._root).$t.apply(ref, [ key ].concat( values ))
  } else {
    ret = this._warnDefault(locale, key, ret, host, values, 'string');
    if (this._postTranslation) {
      ret = this._postTranslation(ret);
    }
    return ret
  }
};

VueI18n.prototype._translate = function _translate (
  messages,
  locale,
  fallback,
  key,
  host,
  interpolateMode,
  args
) { 
  //messages[locale] 拿到语言库
  var res =
    this._interpolate(locale, messages[locale], key, host, interpolateMode, args, [key]);
  if (!isNull(res)) { return res }

  res = this._interpolate(fallback, messages[fallback], key, host, interpolateMode, args, [key]);
  if (!isNull(res)) {
    if (!this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {
      warn(("Fall back to translate the keypath '" + key + "' with '" + fallback + "' locale."));
    }
    return res
  } else {
    return null
  }
};

VueI18n.prototype._interpolate = function _interpolate (
  locale,
  message,
  key,
  host,
  interpolateMode,
  values,
  visitedLinkStack
) {
  if (!message) { return null }

  var pathRet = this._path.getPathValue(message, key);
  if (Array.isArray(pathRet) || isPlainObject(pathRet)) { return pathRet }

  var ret;
  if (isNull(pathRet)) {
    /* istanbul ignore else */
    if (isPlainObject(message)) {
      ret = message[key]; //从语言库里面拿到对应翻译值
      if (typeof ret !== 'string') {
        if (!this._isSilentTranslationWarn(key) && !this._isSilentFallback(locale, key)) {
          warn(("Value of key '" + key + "' is not a string!"));
        }
        return null
      }
    } else {
      return null
    }
  } else {
    /* istanbul ignore else */
    if (typeof pathRet === 'string') {
      ret = pathRet;
    } else {
      if (!this._isSilentTranslationWarn(key) && !this._isSilentFallback(locale, key)) {
        warn(("Value of key '" + key + "' is not a string!"));
      }
      return null
    }
  }

  // Check for the existence of links within the translated string
  if (ret.indexOf('@:') >= 0 || ret.indexOf('@.') >= 0) {
    ret = this._link(locale, message, ret, host, 'raw', values, visitedLinkStack);
  }

  return this._render(ret, interpolateMode, values, key)
};

VueI18n.prototype._render = function _render (message, interpolateMode, values, path) {
  var ret = this._formatter.interpolate(message, values, path);
  // If the custom formatter refuses to work - apply the default one
  if (!ret) {
    ret = defaultFormatter.interpolate(message, values, path);
  }
  // if interpolateMode is **not** 'string' ('row'),
  // return the compiled data (e.g. ['foo', VNode, 'bar']) with formatter
  return interpolateMode === 'string' && typeof ret !== 'string' ? ret.join('') : ret
};

application.js

use(fn) {
    if (typeof fn !== 'function') throw new TypeError('middleware must be a function!');
    if (isGeneratorFunction(fn)) {
      deprecate('Support for generators will be removed in v3. ' +
                'See the documentation for examples of how to convert old middleware ' +
                'https://github.com/koajs/koa/blob/master/docs/migration.md');
      fn = convert(fn);
    }
    debug('use %s', fn._name || fn.name || '-');
    this.middleware.push(fn);
    return this;
  }

const convert = require('koa-convert');

function convert (mw) {
  if (typeof mw !== 'function') {
    throw new TypeError('middleware must be a function')
  }
  //再次确认是否是generator函数
  if (mw.constructor.name !== 'GeneratorFunction') {
    // 假设它是一个基于promise的中间件
    // 就直接返回
    return mw
  }
  //如果是generator函数就转换成promise形式
  const converted = function (ctx, next) {
    return co.call(ctx, mw.call(ctx, createGenerator(next)))
  }
  converted._name = mw._name || mw.name
  return converted
}

const co = require('co')

function co(gen) {
  var ctx = this;
  var args = slice.call(arguments, 1)

  // we wrap everything in a promise to avoid promise chaining,
  // which leads to memory leak errors.
  // see https://github.com/tj/co/issues/180
  return new Promise(function(resolve, reject) {
    if (typeof gen === 'function') gen = gen.apply(ctx, args);
    if (!gen || typeof gen.next !== 'function') return resolve(gen);

    onFulfilled();

    /**
     * @param {Mixed} res
     * @return {Promise}
     * @api private
     */

    function onFulfilled(res) {
      var ret;
      try {
        ret = gen.next(res);
      } catch (e) {
        return reject(e);
      }
      next(ret);
    }

    /**
     * @param {Error} err
     * @return {Promise}
     * @api private
     */

    function onRejected(err) {
      var ret;
      try {
        ret = gen.throw(err);
      } catch (e) {
        return reject(e);
      }
      next(ret);
    }

    /**
     * Get the next value in the generator,
     * return a promise.
     *
     * @param {Object} ret
     * @return {Promise}
     * @api private
     */

    function next(ret) {
      if (ret.done) return resolve(ret.value);
      var value = toPromise.call(ctx, ret.value);
      if (value && isPromise(value)) return value.then(onFulfilled, onRejected);
      return onRejected(new TypeError('You may only yield a function, promise, generator, array, or object, '
        + 'but the following object was passed: "' + String(ret.value) + '"'));
    }
  });
}

application.js

listen(...args) {
  debug('listen');
  const server = http.createServer(this.callback());
  return server.listen(...args);
}

callback() {
  const fn = compose(this.middleware); //整合中间件

  if (!this.listenerCount('error')) this.on('error', this.onerror);

  const handleRequest = (req, res) => {
    const ctx = this.createContext(req, res);
    return this.handleRequest(ctx, fn); //调用中间件
  };

  return handleRequest;
}

handleRequest(ctx, fnMiddleware) {
  //通过传递过来的ctx,获取到原生的可写流
  const res = ctx.res;
  //设置默认状态码
  res.statusCode = 404;
  const onerror = err => ctx.onerror(err);
  const handleResponse = () => respond(ctx);
  onFinished(res, onerror);
  //调用中间件大函数 同时准备catch处理中间件级错误
  return fnMiddleware(ctx).then(handleResponse).catch(onerror); 
}

function compose (middleware) {
  if (!Array.isArray(middleware)) throw new TypeError('Middleware stack must be an array!')
  for (const fn of middleware) {
    if (typeof fn !== 'function') throw new TypeError('Middleware must be composed of functions!')
  }
  //调用时fnMiddleware(ctx).then(handleResponse).catch(onerror); 
  //next 是undefined
  return function (context, next) {
    // last called middleware #
    let index = -1
    return dispatch(0)
    function dispatch (i) {
      if (i <= index) return Promise.reject(new Error('next() called multiple times'))
      index = i
      let fn = middleware[i]
      if (i === middleware.length) fn = next
      if (!fn) return Promise.resolve()
      try {//try-catch 用于保证错误在promise的情况能够正常捕获
        return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
      } catch (err) {
        return Promise.reject(err)
      }
    }
  }
}

let index = -1
return dispatch(0) //从第一个中间件开始执行
function dispatch (i) {
  //防止next 在一个中间件中被调用多次
  if (i <= index) return Promise.reject(new Error('next() called multiple times'))
  index = i
  let fn = middleware[i] //拿到中间件
  if (i === middleware.length) fn = next //如果中间件函数全部调用完，fn 赋值为next,next为undefined
  if (!fn) return Promise.resolve() //fn为next=>undefined时成立，即执行到最后返回一个Promise.resolve() 可以继续写then
  try {//try-catch 用于保证错误在promise的情况能够正常捕获
    //执行中间件函数，传入ctx,next参数，next即dispatch.bind(null, i + 1)，
    //递归调用下一个中间件函数
    //从这一步可以实现await next()时，先执行下一个中间件函数
    //中间件有调用next,就利用await暂停当前中间件执行，开始执行下一个中间件
    return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
  } catch (err) {
    return Promise.reject(err)
  }
}

let moduleA = {
  namespaced: true,
  state(){ 
    return{
      counta: 0, //分别在模块b和全局下被使用，直接返回对象会通过引用被共享，防止模块间数据污染，使用函数，每次生成新对象，原理同vue的data
    }
  },
  getters:{
    getCount(...args){ //this.$store.getters['b/aa/getCount'] 作为b子模块时
      console.log(args)
      return  'this is a getter~~~~~'
    }
  },
  mutations: { // this.$store.commit('b/aa/increment') 仅触发模块b下面的aa子模块  
    increment (state) { //this.$store.commit('a/increment') 仅触发全局的模块a 对应的子模块 
      state.counta++
    },
    incrementaaa (state) { //在被引用时，套嵌层如果都没有namespaced: true,可以直接用this.$store.commit('incrementaaa')调用进行更改
      state.counta++
    }
  }
}

let moduleB = {
  namespaced: true,
  state: { 
    countb: 0,//this.$store.state.b.countb
  },
  getters:{
    getCount(...args){ //this.$store.getters['b/getCount'] 因为设置了namespaced所以可以重名
      console.log(args)
      return  'this is a getter~~~~~'
    }
  },
  mutations: {
    increment (state) { //如果不加namespaced，执行this.$store.commit('increment')，会同时执行
      state.countb++
    }
  },
  modules: {//如果moduleB不加namespaced，aa可以访问数据但不能调用this.$store.commit('b/aa/increment')进行更改
    aa: moduleA,//this.$store.state.b.aa.counta
  }
}
// vuex相关代码
const store = new Vuex.Store({
  state: { 
    count: 0, //this.$store.state.count
  },
  getters:{
    getCount(...args){ //this.$store.getters.getCount
      console.log(args)
      return  'this is a getter'
    }
  },
  mutations: {
    increment (state) { //this.$store.commit('increment') 子模块有相同函数时，都会触发执行
      state.count++
    }
  },
  modules: {
    a: moduleA, //this.$store.state.a.counta
    b: moduleB //this.$store.state.b.countb
  }
})

var Store = function Store (options) {
   var this$1 = this;
   if ( options === void 0 ) options = {};
   if (!Vue && typeof window !== 'undefined' && window.Vue) {
     install(window.Vue);
   }
   var plugins = options.plugins; if ( plugins === void 0 ) plugins = [];
   var strict = options.strict; if ( strict === void 0 ) strict = false;

   // 一些内部参数
   this._committing = false;
   this._actions = Object.create(null);
   this._actionSubscribers = [];
   this._mutations = Object.create(null);
   this._wrappedGetters = Object.create(null);
   this._modules = new ModuleCollection(options);
   this._modulesNamespaceMap = Object.create(null);
   this._subscribers = [];
   this._watcherVM = new Vue();
   this._makeLocalGettersCache = Object.create(null);

   //绑定 commit 和 dispatch 的执行对象始终指向自己，防止外界重新绑定
   var store = this;
   var ref = this;
   var dispatch = ref.dispatch;
   var commit = ref.commit;
   this.dispatch = function boundDispatch (type, payload) {
     return dispatch.call(store, type, payload)
   };
   this.commit = function boundCommit (type, payload, options) {
     return commit.call(store, type, payload, options)
   };

   // 严格模式
   //使 Vuex store 进入严格模式，在严格模式下，任何 mutation 处理函数以外修改 Vuex state 都会抛出错误。
   this.strict = strict;
   //拿到处理后的state
   var state = this._modules.root.state;

   // 初始化全局module
   // 同时递归注册所有子模块
   // 收集this._wrappedGetters中的所有模块的getters
   installModule(this, state, [], this._modules.root);

   // 初始化store vm, 用于数据响应
   // 同时注册 _wrappedGetters 作为计算属性)
   resetStoreVM(this, state);

   // 使用插件处理
   plugins.forEach(function (plugin) { return plugin(this$1); });
   //options.devtools为某个特定的 Vuex 实例打开或关闭 devtools。
   //对于传入 false 的实例来说 Vuex store 不会订阅到 devtools 插件。可用于一个页面中有多个 store 的情况
   var useDevtools = options.devtools !== undefined ? options.devtools : Vue.config.devtools;
   if (useDevtools) {
     devtoolPlugin(this);
   }
 };

function install (_Vue) {
  if (Vue && _Vue === Vue) {
    //Vue.use(Vuex) should be called only once
    return
  }
  Vue = _Vue;
  applyMixin(Vue);
}
function applyMixin (Vue) {
  var version = Number(Vue.version.split('.')[0]);

  if (version >= 2) {
    Vue.mixin({ beforeCreate: vuexInit }); //使用beforeCreate将$store绑定到每个VueComponent 上
  } else {
    //小于版本2的用_init初始化
    var _init = Vue.prototype._init;
    Vue.prototype._init = function (options) {
      if ( options === void 0 ) options = {};

      options.init = options.init
        ? [vuexInit].concat(options.init)
        : vuexInit;
      _init.call(this, options);
    };
  }

  function vuexInit () {
    var options = this.$options;
    // store injection
    if (options.store) {
      this.$store = typeof options.store === 'function'
        ? options.store()
        : options.store;
    } else if (options.parent && options.parent.$store) {
      this.$store = options.parent.$store; //当前组件$store指向父组件$store，递归指向，从而保证唯一性
    }
  }
}

var ModuleCollection = function ModuleCollection (rawRootModule) {
    // 根据new Store 传入的参数，注册根模块
    this.register([], rawRootModule, false);
  };
  // new store 时传入的参数 [], rawRootModule, false
  ModuleCollection.prototype.register = function register (path, rawModule, runtime) {
    var this$1 = this;
    if ( runtime === void 0 ) runtime = true;
    var newModule = new Module(rawModule, runtime);
    //{runtime:false,_children:{},_rawModule:rawModule,state:rawModule上面的state,__proto__:一系列方法}
    if (path.length === 0) {
      this.root = newModule; //初始化根模块
    } else { //初始化子模块
      var parent = this.get(path.slice(0, -1)); //拿到父模块
      parent.addChild(path[path.length - 1], newModule); //给父模块_children属性增加子模块
    }

    // 注册嵌套模块
    if (rawModule.modules) {
      forEachValue(rawModule.modules, function (rawChildModule, key) {
        this$1.register(path.concat(key), rawChildModule, runtime); //递归注册
      });
    }
  };

var Module = function Module (rawModule, runtime) {
  this.runtime = runtime;
  // Store some children item
  this._children = Object.create(null);
  // Store the origin module object which passed by programmer
  this._rawModule = rawModule;
  var rawState = rawModule.state;

  // Store the origin module's state
  this.state = (typeof rawState === 'function' ? rawState() : rawState) || {};
};

Module.prototype.addChild = function addChild (key, module) {
  this._children[key] = module;
};
Module.prototype.getChild = function getChild (key) {
  return this._children[key]
};

this._modules = new ModuleCollection(options);

ModuleCollection {
  root: Module {
    runtime: false,
    _children: {a: Module, b: Module}
    _rawModule: {state: {…}, mutations: {…}, modules: {…}}
    state: {count: 0}
    __proto__: Object
  }
  __proto__: Object
}

ModuleCollection.prototype.get = function get (path) {
  return path.reduce(function (module, key) {
    return module.getChild(key)
  }, this.root)
};

ModuleCollection.prototype.getNamespace = function getNamespace (path) {
  var module = this.root;
  //对设置了namespaced的模块进行拼接
  return path.reduce(function (namespace, key) {
    module = module.getChild(key); //从_children取出子模块
    return namespace + (module.namespaced ? key + '/' : '')
  }, '')
};

ModuleCollection.prototype.update = function update$1 (rawRootModule) {
  update([], this.root, rawRootModule);
};
ModuleCollection.prototype.unregister = function unregister (path) {
  var parent = this.get(path.slice(0, -1));
  var key = path[path.length - 1];
  if (!parent.getChild(key).runtime) { return }

  parent.removeChild(key);
};

//初始化调用时传参 （this, state, [], this._modules.root)
function installModule (store, rootState, path, module, hot) {
  //根模块时，参数分别为store本身，根模块state, [], 根模块，undefined
  //递归子模块时，参数为 store本身，根模块state,子模块在modules对象中的路径key值
  var isRoot = !path.length; //空数组即根模块
  //ModuleCollection.prototype.getNamespace 根模块返回空字符串''
  var namespace = store._modules.getNamespace(path); 

  //如果模块设置了命名空间 在store._modulesNamespaceMap属性中注册
  if (module.namespaced) {
    if (store._modulesNamespaceMap[namespace] && "development" !== 'production') {
      console.error(("[vuex] duplicate namespace " + namespace + " for the namespaced module " + (path.join('/'))));
    }
    store._modulesNamespaceMap[namespace] = module;
  }

  //对子模块state进行数据劫持处理
  if (!isRoot && !hot) {
    var parentState = getNestedState(rootState, path.slice(0, -1));
    var moduleName = path[path.length - 1];
    store._withCommit(function () {
      {
        if (moduleName in parentState) {
          console.warn(
            ("[vuex] state field \"" + moduleName + "\" was overridden by a module with the same name at \"" + (path.join('.')) + "\"")
          );
        }
      }
      Vue.set(parentState, moduleName, module.state); //将子模块state按照模块名添加到父模块state中
    });
  }
  //根据有无namespace
  //截取state,getter的get,
  //封装触发函数dispactch和commit,有namespace拼接后再触发
  var local = module.context = makeLocalContext(store, namespace, path);

  module.forEachMutation(function (mutation, key) {
    var namespacedType = namespace + key;
    registerMutation(store, namespacedType, mutation, local);
  });

  module.forEachAction(function (action, key) {
    var type = action.root ? key : namespace + key;
    var handler = action.handler || action;
    registerAction(store, type, handler, local);
  });

  module.forEachGetter(function (getter, key) {
    var namespacedType = namespace + key;
    registerGetter(store, namespacedType, getter, local);
  });

  module.forEachChild(function (child, key) {
    installModule(store, rootState, path.concat(key), child, hot);
  });
}

function forEachValue (obj, fn) {
   Object.keys(obj).forEach(function (key) { return fn(obj[key], key); });
 }

Module.prototype.forEachMutation = function forEachMutation (fn) {
  if (this._rawModule.mutations) {
    forEachValue(this._rawModule.mutations, fn);
  }
};
//参数：store本身，经过namespace拼接后的类型标记，具体对应的mutation,当前模块上封装好的state,getters,commit,dispatch
function registerMutation (store, type, handler, local) {
  var entry = store._mutations[type] || (store._mutations[type] = []);
  entry.push(function wrappedMutationHandler (payload) {
    handler.call(store, local.state, payload);
  });
}

Module.prototype.forEachAction = function forEachAction (fn) {
  if (this._rawModule.actions) {
    forEachValue(this._rawModule.actions, fn);
  }
};

function registerAction (store, type, handler, local) {
  var entry = store._actions[type] || (store._actions[type] = []);
  entry.push(function wrappedActionHandler (payload) {
    var res = handler.call(store, {
      dispatch: local.dispatch,
      commit: local.commit,
      getters: local.getters,
      state: local.state,
      rootGetters: store.getters,
      rootState: store.state
    }, payload);
    if (!isPromise(res)) {
      res = Promise.resolve(res);
    }
    if (store._devtoolHook) {
      return res.catch(function (err) {
        store._devtoolHook.emit('vuex:error', err);
        throw err
      })
    } else {
      return res
    }
  });
}

Module.prototype.forEachGetter = function forEachGetter (fn) {
  if (this._rawModule.getters) {
    forEachValue(this._rawModule.getters, fn);
  }
};

function registerGetter (store, type, rawGetter, local) {
  if (store._wrappedGetters[type]) {
    {
      console.error(("[vuex] duplicate getter key: " + type));
    }
    return
  }
  store._wrappedGetters[type] = function wrappedGetter (store) {
    return rawGetter(
      local.state, // 当前模块state
      local.getters, // 当前模块 getters
      store.state, // 根模块 state
      store.getters // 根模块 getters
    )
  };
}

Module.prototype.forEachChild = function forEachChild (fn) {
  forEachValue(this._children, fn);
};

module.forEachChild(function (child, key) {
  installModule(store, rootState, path.concat(key), child, hot);
});

  function makeLocalContext (store, namespace, path) {
    var noNamespace = namespace === '';

    var local = {
      dispatch: noNamespace ? store.dispatch : function (_type, _payload, _options) {
        var args = unifyObjectStyle(_type, _payload, _options);
        var payload = args.payload;
        var options = args.options;
        var type = args.type;

        if (!options || !options.root) {
          type = namespace + type;//有namespace拼接后再触发
          if (!store._actions[type]) {
            console.error(("[vuex] unknown local action type: " + (args.type) + ", global type: " + type));
            return
          }
        }

        return store.dispatch(type, payload)
      },

      commit: noNamespace ? store.commit : function (_type, _payload, _options) {
        var args = unifyObjectStyle(_type, _payload, _options);
        var payload = args.payload;
        var options = args.options;
        var type = args.type;

        if (!options || !options.root) {
          type = namespace + type; //有namespace拼接后再触发
          if (!store._mutations[type]) {
            console.error(("[vuex] unknown local mutation type: " + (args.type) + ", global type: " + type));
            return
          }
        }

        store.commit(type, payload, options);
      }
    };

    // getters and state object must be gotten lazily
    // because they will be changed by vm update
    Object.defineProperties(local, {
      getters: {
        get: noNamespace
          ? function () { return store.getters; }
          : function () { return makeLocalGetters(store, namespace); }
      },
      state: {
        get: function () { return getNestedState(store.state, path); }
      }
    });

    return local
  }

function makeLocalGetters (store, namespace) {
  if (!store._makeLocalGettersCache[namespace]) {
    var gettersProxy = {};
    var splitPos = namespace.length;
    Object.keys(store.getters).forEach(function (type) {
      // skip if the target getter is not match this namespace
      if (type.slice(0, splitPos) !== namespace) { return }

      // extract local getter type
      var localType = type.slice(splitPos);

      // Add a port to the getters proxy.
      // Define as getter property because
      // we do not want to evaluate the getters in this time.
      Object.defineProperty(gettersProxy, localType, {
        get: function () { return store.getters[type]; },
        enumerable: true
      });
    });
    store._makeLocalGettersCache[namespace] = gettersProxy;
  }

  return store._makeLocalGettersCache[namespace]
}
function getNestedState (state, path) {
  return path.reduce(function (state, key) { return state[key]; }, state)
}

commit: ƒ boundCommit(type, payload, options)
dispatch: ƒ boundDispatch(type, payload)
strict: false
_actionSubscribers: []
_actions: {} //存放所有模块的action
_committing: false
_makeLocalGettersCache: {}
_modules: ModuleCollection {
  root: Module
  context: //新增根据namespace处理后的触发函数
    commit: ƒ boundCommit(type, payload, options)
    dispatch: ƒ boundDispatch(type, payload)
    getters: (...)
    state: (...)
    get getters: ƒ ()
    get state: ƒ ()
    __proto__: Object
  runtime: false
  state: //将子模块state集中到根模块state
    a: {counta: 2329}
    b:
      aa: {counta: 2329}
      countb: 0
      __proto__: Object
    count: 0
    __proto__: Object
  _children: //对子模块递归过程挂载context属性
    a: Module {runtime: false, _children: {…}, _rawModule: {…}, state: {…}, context: {…}}
    b: Module {runtime: false, _children: {…}, _rawModule: {…}, state: {…}, context: {…}}
  _rawModule: {state: {…}, mutations: {…}, modules: {…}}
  namespaced: (...)
  __proto__: Object
__proto__: Object
}
_modulesNamespaceMap: {b/: Module} //存放设置了namespace的模块
_mutations: {increment: Array(1), incrementaaa: Array(1), b/increment: Array(1), b/incrementaaa: Array(1)} //存放所有模块的mutation
_subscribers: []
_watcherVM: Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
_wrappedGetters: {} //存放所有模块的getters
state: (...) //对局部变量做了处理，还没有挂到store上

function partial (fn, arg) {
  return function () {
    return fn(arg)
  }
}
function resetStoreVM (store, state, hot) {
    var oldVm = store._vm;
    //绑定存储公共的getters
    store.getters = {};
    // 重置内部getters缓存到_makeLocalGettersCache
    store._makeLocalGettersCache = Object.create(null);
    var wrappedGetters = store._wrappedGetters;
    var computed = {};
    forEachValue(wrappedGetters, function (fn, key) {
      //如果直接使用，闭包里面会包含oldVm
      computed[key] = partial(fn, store);
      Object.defineProperty(store.getters, key, {
        get: function () { return store._vm[key]; },//直接调用vue的compute属性
        enumerable: true // for local getters
      });
    });

    //使用vue实例存放state和getters
    var silent = Vue.config.silent;
    /* Vue.config.silent暂时设置为true的目的是在new一个Vue实例的过程中不会报出一切警告 */
    Vue.config.silent = true
    store._vm = new Vue({
      data: {
        $$state: state
      },
      computed: computed
    });
    Vue.config.silent = silent;

     /* 使能严格模式，保证修改store只能通过mutation */
    if (store.strict) {
      enableStrictMode(store);
    }

    if (oldVm) {
      if (hot) {
        // dispatch changes in all subscribed watchers
        // to force getter re-evaluation for hot reloading.
        store._withCommit(function () {
          oldVm._data.$$state = null;
        });
      }
      Vue.nextTick(function () { return oldVm.$destroy(); });
    }
  }

Store.prototype.commit = function commit (_type, _payload, _options) {
  var this$1 = this;

  // check object-style commit
  var ref = unifyObjectStyle(_type, _payload, _options);
  var type = ref.type;
  var payload = ref.payload;
  var options = ref.options;

  var mutation = { type: type, payload: payload };
  var entry = this._mutations[type];
  if (!entry) {
    {
      console.error(("[vuex] unknown mutation type: " + type));
    }
    return
  }
  this._withCommit(function () {
    entry.forEach(function commitIterator (handler) {
      handler(payload);
    });
  });

  this._subscribers
    .slice() // shallow copy to prevent iterator invalidation if subscriber synchronously calls unsubscribe
    .forEach(function (sub) { return sub(mutation, this$1.state); });

  if (
    options && options.silent
  ) {
    console.warn(
      "[vuex] mutation type: " + type + ". Silent option has been removed. " +
      'Use the filter functionality in the vue-devtools'
    );
  }
};

Store.prototype.dispatch = function dispatch (_type, _payload) {
      var this$1 = this;

    // check object-style dispatch
    var ref = unifyObjectStyle(_type, _payload);
      var type = ref.type;
      var payload = ref.payload;

    var action = { type: type, payload: payload };
    var entry = this._actions[type];
    if (!entry) {
      {
        console.error(("[vuex] unknown action type: " + type));
      }
      return
    }

    try {
      this._actionSubscribers
        .slice() // shallow copy to prevent iterator invalidation if subscriber synchronously calls unsubscribe
        .filter(function (sub) { return sub.before; })
        .forEach(function (sub) { return sub.before(action, this$1.state); });
    } catch (e) {
      {
        console.warn("[vuex] error in before action subscribers: ");
        console.error(e);
      }
    }

    var result = entry.length > 1
      ? Promise.all(entry.map(function (handler) { return handler(payload); }))
      : entry[0](payload);

    return result.then(function (res) {
      try {
        this$1._actionSubscribers
          .filter(function (sub) { return sub.after; })
          .forEach(function (sub) { return sub.after(action, this$1.state); });
      } catch (e) {
        {
          console.warn("[vuex] error in after action subscribers: ");
          console.error(e);
        }
      }
      return res
    })
  };

  Store.prototype.subscribe = function subscribe (fn) {
    return genericSubscribe(fn, this._subscribers)
  };

  Store.prototype.subscribeAction = function subscribeAction (fn) {
    var subs = typeof fn === 'function' ? { before: fn } : fn;
    return genericSubscribe(subs, this._actionSubscribers)
  };

  Store.prototype.watch = function watch (getter, cb, options) {
      var this$1 = this;

    {
      assert(typeof getter === 'function', "store.watch only accepts a function.");
    }
    return this._watcherVM.$watch(function () { return getter(this$1.state, this$1.getters); }, cb, options)
  };

  Store.prototype.replaceState = function replaceState (state) {
      var this$1 = this;

    this._withCommit(function () {
      this$1._vm._data.$$state = state;
    });
  };

  Store.prototype.registerModule = function registerModule (path, rawModule, options) {
      if ( options === void 0 ) options = {};

    if (typeof path === 'string') { path = [path]; }

    {
      assert(Array.isArray(path), "module path must be a string or an Array.");
      assert(path.length > 0, 'cannot register the root module by using registerModule.');
    }

    this._modules.register(path, rawModule);
    installModule(this, this.state, path, this._modules.get(path), options.preserveState);
    // reset store to update getters...
    resetStoreVM(this, this.state);
  };

  Store.prototype.unregisterModule = function unregisterModule (path) {
      var this$1 = this;

    if (typeof path === 'string') { path = [path]; }

    {
      assert(Array.isArray(path), "module path must be a string or an Array.");
    }

    this._modules.unregister(path);
    this._withCommit(function () {
      var parentState = getNestedState(this$1.state, path.slice(0, -1));
      Vue.delete(parentState, path[path.length - 1]);
    });
    resetStore(this);
  };

  Store.prototype.hotUpdate = function hotUpdate (newOptions) {
    this._modules.update(newOptions);
    resetStore(this, true);
  };

  Store.prototype._withCommit = function _withCommit (fn) {
    var committing = this._committing;
    this._committing = true;
    fn();
    this._committing = committing;
  };
  
  function genericSubscribe (fn, subs) {
    if (subs.indexOf(fn) < 0) {
      subs.push(fn);
    }
    return function () {
      var i = subs.indexOf(fn);
      if (i > -1) {
        subs.splice(i, 1);
      }
    }
  }

  function resetStore (store, hot) {
    store._actions = Object.create(null);
    store._mutations = Object.create(null);
    store._wrappedGetters = Object.create(null);
    store._modulesNamespaceMap = Object.create(null);
    var state = store.state;
    // init all modules
    installModule(store, state, [], store._modules.root, true);
    // reset vm
    resetStoreVM(store, state, hot);
  }

Vue.prototype._init = function (options) {
  vm.$options = mergeOptions(
    resolveConstructorOptions(vm.constructor),
    options || {},
    vm
  );
  callHook(vm, 'beforeCreate');//运行订阅了beforecreate钩子的相关方法
  initState(vm);//处理数据
  callHook(vm, 'created');

function mergeOptions (
   parent,
   child,
   vm
 ) {
   {
     checkComponents(child);
   }
   
   if (typeof child === 'function') {
     child = child.options;
   }

   // ... normalizeProps, normalizeInject, normalizeDirectives

   if (!child._base) {
     if (child.extends) {
       parent = mergeOptions(parent, child.extends, vm);
     }
     if (child.mixins) {
       for (var i = 0, l = child.mixins.length; i < l; i++) {
         parent = mergeOptions(parent, child.mixins[i], vm);
       }
     }
   }

   var options = {};
   var key;
   for (key in parent) {
     mergeField(key);
   }
   for (key in child) {
     if (!hasOwn(parent, key)) {
       mergeField(key);
     }
   }
   //在上面的循环中会遍历到配置的options参数里的data属性，则会调用到strats.data
   function mergeField (key) { 
     var strat = strats[key] || defaultStrat;
     options[key] = strat(parent[key], child[key], vm, key);
   }
   return options
 }
 //
 strats.data = function (
   parentVal,
   childVal,
   vm
 ) {
   if (!vm) {
     //...vm就是VUE实例，所以不会走这里
     return mergeDataOrFn(parentVal, childVal)
   }
   return mergeDataOrFn(parentVal, childVal, vm)
 };

 function mergeDataOrFn (
   parentVal,
   childVal,
   vm
 ) {
   if (!vm) {
     ...
   } else {
     return function mergedInstanceDataFn () {
       // instance merge
       var instanceData = typeof childVal === 'function'
         ? childVal.call(vm, vm)
         : childVal;
       var defaultData = typeof parentVal === 'function'
         ? parentVal.call(vm, vm)
         : parentVal;
       if (instanceData) {
         return mergeData(instanceData, defaultData)
       } else {
         return defaultData
       }
     }
   }
 }

vm.$options.data = function mergedInstanceDataFn () {
  //声明时传递进来的data属性值,是函数则执行拿到对象
  var instanceData = typeof childVal === 'function' 
    ? childVal.call(vm, vm)
    : childVal;
  //内部属性没有data属性，所以 defaultData 为undefined
  var defaultData = typeof parentVal === 'function'
    ? parentVal.call(vm, vm)
    : parentVal;
  if (instanceData) {
    return mergeData(instanceData, defaultData)
  } else {
    return defaultData
  }
}
function mergeData (to, from) {
  if (!from) { return to }
  ...//省略若干逻辑
}

function initState (vm) {
  vm._watchers = [];
  var opts = vm.$options;
  if (opts.data) {
    initData(vm);
  } else {
    observe(vm._data = {}, true /* asRootData */);
  }
}

function initData (vm) {
    var data = vm.$options.data;
    data = vm._data = typeof data === 'function'
      ? getData(data, vm)
      : data || {};
    //得到的data不是object对象
    if (!isPlainObject(data)) {
      data = {};
    }
    // proxy data on instance
    var keys = Object.keys(data);
    var props = vm.$options.props;
    var methods = vm.$options.methods;
    var i = keys.length;
    while (i--) {
      var key = keys[i];
      {if (methods && hasOwn(methods, key)) {...与method同名警告}}
      if (props && hasOwn(props, key)) {
       ...与prop同名警告
      } else if (!isReserved(key)) { //不是以$或者_开头的key
        proxy(vm, "_data", key); //将key值存一份到vm的'_data'属性上
      }
    }
    // observe data
    observe(data, true /* asRootData */);
  }

  function getData (data, vm) {
    // #7573 disable dep collection when invoking(调用) data getters
    pushTarget();
    try {
      return data.call(vm, vm)
    } catch (e) {
      handleError(e, vm, "data()");
      return {}
    } finally {
      popTarget();
    }
  }
  var sharedPropertyDefinition = {
    enumerable: true,
    configurable: true,
    get: noop,
    set: noop
  };
  function proxy (target, sourceKey, key) {
    sharedPropertyDefinition.get = function proxyGetter () {
      return this[sourceKey][key]
    };
    sharedPropertyDefinition.set = function proxySetter (val) {
      this[sourceKey][key] = val;
    };
    Object.defineProperty(target, key, sharedPropertyDefinition);
  }

function observe (value, asRootData) {
  if (!isObject(value) || value instanceof VNode) {
    return
  }
  var ob;
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    ob = value.__ob__;
  } else if (
    shouldObserve &&
    !isServerRendering() &&
    (Array.isArray(value) || isPlainObject(value)) &&
    Object.isExtensible(value) &&
    !value._isVue
  ) {
    ob = new Observer(value);
  }
  if (asRootData && ob) {
    ob.vmCount++;
  }
  return ob
}

var Observer = function Observer (value) {
  this.value = value;
  this.dep = new Dep();
  this.vmCount = 0;
  def(value, '__ob__', this);
  if (Array.isArray(value)) {
    if (hasProto) {
      protoAugment(value, arrayMethods);
    } else {
      copyAugment(value, arrayMethods, arrayKeys);
    }
    this.observeArray(value);
  } else {
    this.walk(value);
  }
};
function def (obj, key, val, enumerable) {
  Object.defineProperty(obj, key, {
    value: val,
    enumerable: !!enumerable,
    writable: true,
    configurable: true
  });
}
//遍历所有属性并将它们转换为getter / setter。 
//仅当值类型为Object时才应调用此方法。
Observer.prototype.walk = function walk (obj) {
  var keys = Object.keys(obj);
  for (var i = 0; i < keys.length; i++) {
    defineReactive$$1(obj, keys[i]);
  }
};

function defineReactive$$1 (
    obj,
    key,
    val,
    customSetter,
    shallow
  ) {
    var dep = new Dep();

    var property = Object.getOwnPropertyDescriptor(obj, key);
    if (property && property.configurable === false) {
      return
    }

    // cater(迎合) for pre-defined getter/setters
    var getter = property && property.get;
    var setter = property && property.set;
    if ((!getter || setter) && arguments.length === 2) {
      val = obj[key];
    }

    var childOb = !shallow && observe(val);//对值进行劫持处理 开始递归处理
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get: function reactiveGetter () {
        var value = getter ? getter.call(obj) : val;
        if (Dep.target) { //new watch的时候，Dep.target指向Watcher对象,再运行render函数，访问具体变量就会调用这里
          dep.depend();//对key的依赖进行依赖收集
          if (childOb) {//如果值是一个对象的情况下
            childOb.dep.depend();//对对象值的依赖进行依赖收集 实现深度监听
            if (Array.isArray(value)) {
              dependArray(value);
            }
          }
        }
        return value
      },
      set: function reactiveSetter (newVal) {
        var value = getter ? getter.call(obj) : val;
        //相同值，不更新
        if (newVal === value || (newVal !== newVal && value !== value)) {
          return
        }
        //有setter方法直接用setter方法更新，没有直接赋值
        if (getter && !setter) { return }
        if (setter) {
          setter.call(obj, newVal);
        } else {
          val = newVal;
        }
        //对新值进行劫持处理 更新childOb
        //如果新值是对象对新赋的值在更新时进行依赖收集
        childOb = !shallow && observe(newVal); 
        dep.notify();
      }
    });
  }

var Dep = function Dep () {
  this.id = uid++;
  this.subs = [];
};
Dep.prototype.addSub = function addSub (sub) {
  this.subs.push(sub);
};

Dep.prototype.depend = function depend () {
  if (Dep.target) {
    Dep.target.addDep(this); //调用Watcher.addDep方法，this指dep
  }
};

Dep.prototype.notify = function notify () {
  // stabilize the subscriber list first
  var subs = this.subs.slice();
  if (!config.async) {
    // subs aren't sorted in scheduler if not running async
    // we need to sort them now to make sure they fire in correct
    // order
    subs.sort(function (a, b) { return a.id - b.id; });
  }
  for (var i = 0, l = subs.length; i < l; i++) {
    subs[i].update(); //执行watcher的update函数
  }
};
Dep.target = null;
var targetStack = [];

var _Set;
/* istanbul ignore if */ // $flow-disable-line
if (typeof Set !== 'undefined' && isNative(Set)) {
  // use native Set when available.
  _Set = Set;
} else {
  // a non-standard Set polyfill that only works with primitive keys.
  _Set = /*@__PURE__*/(function () {
    function Set () {
      this.set = Object.create(null);
    }
    Set.prototype.has = function has (key) {
      return this.set[key] === true
    };
    Set.prototype.add = function add (key) {
      this.set[key] = true;
    };
    Set.prototype.clear = function clear () {
      this.set = Object.create(null);
    };
    return Set;
  }());
}
var Watcher = function Watcher (...args){
  this.deps = [];
  this.newDeps = [];
  this.depIds = new _Set();
  this.newDepIds = new _Set();
}
Watcher.prototype.get = function get () {
    pushTarget(this); //将当前Watcher挂到第三方Dep.target上
    var value;
    var vm = this.vm;
    try {
      //this.getter会执行render,触发数据的get方法，进行相互订阅
      value = this.getter.call(vm, vm); 
    } catch (e) {
      ...
    } finally {
      // "touch" every property so they are all tracked as
      // dependencies for deep watching
      if (this.deep) {
        traverse(value);
      }
      popTarget();
      this.cleanupDeps();
    }
    return value
  };
function pushTarget (target) {
  targetStack.push(target);
  Dep.target = target;
}
//watcher和dep互相存id
Watcher.prototype.addDep = function addDep (dep) { 
  var id = dep.id;
  if (!this.newDepIds.has(id)) {
    this.newDepIds.add(id);
    this.newDeps.push(dep);
    if (!this.depIds.has(id)) {
      dep.addSub(this); //将watcher加入到dep的sub属性中
    }
  }
};
Watcher.prototype.update = function update () {
  /* istanbul ignore else */
  if (this.lazy) {
    this.dirty = true;
  } else if (this.sync) {
    this.run();
  } else {
    queueWatcher(this);
  }
};
Watcher.prototype.run = function run () {
  if (this.active) {
    var value = this.get(); //重新调用render函数更新数据
    if (
      value !== this.value ||
      //对于需要深度监听的数据类型，值没有变，也许值内容发生了变化 
      isObject(value) ||
      this.deep
    ) {
      var oldValue = this.value;
      this.value = value;
      if (this.user) {
        try {
          this.cb.call(this.vm, value, oldValue);
        } catch (e) {
          handleError(e, this.vm, ("callback for watcher \"" + (this.expression) + "\""));
        }
      } else {
        this.cb.call(this.vm, value, oldValue);
      }
    }
  }
};