vue的源码解析(内部定义及配置)

42次阅读

共计 2052 个字符,预计需要花费 6 分钟才能阅读完成。

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-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD/;
用于分析 HTML 标记、组件名称和属性路径的 Unicode 字母
isReserved
function isReserved (str) {
var c = (str + ”).charCodeAt(0);
return c === 0x24 || c === 0x5F
}
检查字符串开头是否为 $ 或 _ ASCIIcharCodeAt() 方法可返回指定位置的字符的 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() 方法检查字符串是否匹配 bailREsegments 将 path 用 split 分割成字符串数组,一个循环(obj)是什么?

未完待续(持续更新)

正文完
 0