Vue官方文档和源码研读

本文主要是介绍Vue官方文档和源码研读，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

2021.08.31开始 运行时的源码在vue/dist/vue.runtime.esm.js里面，不过有些非函数的定义，打印不出来（看看vue源码断点怎么打比较合适）。看官方文档时候，直接百度中文的那段文字，经常搜不出来，可以先根据官方文档或自己定位到对应的代码段，然后搜索代码段的变量名，就能搜到了 

1.官方文档 模板语法-插值-使用javascript表达式 最后，有这么一句话：模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。

开始我以为是vue.prototype.$aa = 1，不能访问这个$aa。看了源码之后，才明白。全局对象指的是Array、Object这类的js关键字，当然也可以自己定义（待研究）

function makeMap (
  str,
  expectsLowerCase
) {
  var map = Object.create(null);
  var list = str.split(',');
  for (var i = 0; i < list.length; i++) {
    map[list[i]] = true;
  }
  return expectsLowerCase
    ? function (val) { return map[val.toLowerCase()]; }
    : function (val) { return map[val]; }
}

var allowedGlobals = makeMap(  //
    'Infinity,undefined,NaN,isFinite,isNaN,' +
    'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +
    'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt,' +
    'require' // for Webpack/Browserify
  );

var hasHandler = {
    has: function has (target, key) { //target就是当前vue实例，key就是要解析的值
      var has = key in target; //对象的in方法，只要key在target的原型链上，就会返回true，所以设置vue.prototype.$aa = 1之后，使用$aa是没问题的

      var isAllowed = allowedGlobals(key) ||
        (typeof key === 'string' && key.charAt(0) === '_' && !(key in target.$data)); //这里判断的是全局变量或者以_开头的属性，这么做是由于渲染函数中会包含很多以 _开头的内部方法，如渲染函数里遇到的 _c、_v 等等
      if (!has && !isAllowed) {
        if (key in target.$data) { warnReservedPrefix(target, key); }
        else { warnNonPresent(target, key); }
      }
      return has || !isAllowed
    }
  };

最后的判断!has我们可以理解为你访问了一个没有定义在实例对象上(或原型链上)的属性，所以这个时候提示错误信息是合理，但是即便!has成立也不一定要提示错误信息，因为必须要满足!isAllowed，也就是说当你访问了一个虽然不在实例对象上(或原型链上)的属性，但如果你访问的是全局对象那么也是被允许的。这样我们就可以在模板中使用全局对象了

这篇关于Vue官方文档和源码研读的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！