vue的源码解析（内部定义及配置）

PumpkinDylan 发布于2019-08-23 16:01 / 404人阅读

摘要：这边有个的定义。获取元素的名称空间解析特定平台的实际标记名称检查属性是否必须使用属性例如绑定异步执行更新。其中属性返回一个字符串，该字符串包含对象的源文本，并且它不包含两边的两个正斜杠和任何标志。

SSR_ATTR

var SSR_ATTR = "data-server-rendered";

这边有个vue SSR的定义。服务端渲染，后面在6446行才有。看到了多带带给他写一篇。

ASSET_TYPES

var ASSET_TYPES = [
    "component",
    "directive",
    "filter"
];

组件可以拥有的资产类型列表，这边有几个过滤器，自定义，组件的定义，后面看到后打锚点

LIFECYCLE_HOOKS

var LIFECYCLE_HOOKS = [
    "beforeCreate",
    "created",
    "beforeMount",
    "mounted",
    "beforeUpdate",
    "updated",
    "beforeDestroy",
    "destroyed",
    "activated",
    "deactivated",
    "errorCaptured",
    "serverPrefetch"
];

生命周期的钩子。。。依旧留个锚点

config

var config = ({
    optionMergeStrategies: Object.create(null),
    //是否发出警告
    silent: false,
     //启动时显示生产模式提示消息
    productionTip: "development" !== "production",
    //是否启用devtools
    devtools: "development" !== "production",
    //是否记录性能
    performance: false,
    //用于监视程序错误的错误处理程序
    errorHandler: null,
    //用于监视程序警告的警告处理程序
    warnHandler: null,
    //忽略某些自定义元素
    ignoredElements: [],
    //v-on为自定义用户关键字 
    keyCodes: Object.create(null),

    //检查是否保留了标记，以便不能将其注册为组件。  
    isReservedTag: no,
    //检查是否保留了属性，以便它不能用作组件属性。
    isReservedAttr: no,
    //检查标记是否为未知元素。
    isUnknownElement: no,
    //获取元素的名称空间
    getTagNamespace: noop,
    //解析特定平台的实际标记名称
    parsePlatformTagName: identity,
    //检查属性是否必须使用属性(例如value)绑定
    mustUseProp: no,
    //异步执行更新。用于Vue测试Utils,如果设置为false，这将显著降低性能
    async: true,
    //由于遗留原因而暴露
    _lifecycleHooks: LIFECYCLE_HOOKS
  });

Unicode正则表达式

var unicodeRegExp = /a-zA-Zu00B7u00C0-u00D6u00D8-u00F6u00F8-u037Du037F-u1FFFu200C-u200Du203F-u2040u2070-u218Fu2C00-u2FEFu3001-uD7FFuF900-uFDCFuFDF0-uFFFD/;

用于分析HTML标记、组件名称和属性路径的Unicode字母

isReserved

function isReserved (str) {
  var c = (str + "").charCodeAt(0);
  return c === 0x24 || c === 0x5F
}

检查字符串开头是否为 $ 或 _  ASCII
charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。

十进制	十六进制	字符
36	0x24	$
95	0x5F	_

def

function def (obj, key, val, enumerable) {
    Object.defineProperty(obj, key, {
      value: val,
      enumerable: !!enumerable,
      writable: true,
      configurable: true
    });
  }

定义属性，其中!!强制转换 boolean

parsePath

  var bailRE = new RegExp(("[^" + (unicodeRegExp.source) + ".$_d]"));
  function parsePath (path) {
    if (bailRE.test(path)) {
      return
    }
    var segments = path.split(".");
    return function (obj) {
      for (var i = 0; i < segments.length; i++) {
        if (!obj) { return }
        obj = obj[segments[i]];
      }
      return obj
    }
  }

解析简单的路径。

首先定义了一个正则。其中source属性返回一个字符串，该字符串包含regexp对象的源文本，并且它不包含两边的两个正斜杠和任何标志。
test() 方法检查字符串是否匹配bailRE
segments将path用split分割成字符串数组，一个循环（obj）是什么？

var hasProto = "__proto__" in {};

  var inBrowser = typeof window !== "undefined";
  var inWeex = typeof WXEnvironment !== "undefined" && !!WXEnvironment.platform;
  var weexPlatform = inWeex && WXEnvironment.platform.toLowerCase();
  var UA = inBrowser && window.navigator.userAgent.toLowerCase();
  var isIE = UA && /msie|trident/.test(UA);
  var isIE9 = UA && UA.indexOf("msie 9.0") > 0;
  var isEdge = UA && UA.indexOf("edge/") > 0;
  var isAndroid = (UA && UA.indexOf("android") > 0) || (weexPlatform === "android");
  var isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA)) || (weexPlatform === "ios");
  var isChrome = UA && /chrome/d+/.test(UA) && !isEdge;
  var isPhantomJS = UA && /phantomjs/.test(UA);
  var isFF = UA && UA.match(/firefox/(d+)/);
  var nativeWatch = ({}).watch;

这个太基础了，不多解释了。如果需要可以百度一下userAgent

GPU云服务器云服务器内部窗体及数据调用数据仓库定义及特点 vue源码 webrtc的aec源码解析

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102632.html

关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
Vue源码解析(一)：创建vue程序的背后发生了什么

摘要：主要大纲从方法看全局配置寻根问祖的构造函数的出生地先来一段最常见的代码上面已经创建了一个应用程序从上面很容易就看出来是一个构造器，是用这个构造器构造出来的实例化对象，实例化的时候传入了参数，参数中包括和上述延伸了个问题构造器是什么模样可以主要大纲: 从initGlobalAPI方法看Vue.config全局配置寻根问祖-Vue的构造函数的出生地先来一段最常见的vue代码dem...

nevermind 2019-08-26 13:39 评论0 收藏0
【Vue原理】Compile - 源码版之 generate 拼接绑定的事件

摘要：写文章不容易，点个赞呗兄弟专注源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于版本如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧原理源码版之拼接绑定的事件今天我们写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究...

OnlyMyRailgun 2019-08-26 10:45 评论0 收藏0