Vue 源码(三):Vue

接下来,最终调用 mergeOptions 所传的第一个参数就是 Vue.options 这个对象,第二个参数是用户自定义的 options 对象,然后第三参数是 vm。

我们这时候可以打印 parent 和 child 看看是什么东西:

我们可以看到 parent 就是 Vue 本身的一些全局 API,然后 child 就是我们自己所传过去的 options 对象。

那么接下来我们应该怎么办呢?我们会在 mergeOptions 里面做两件事情,一个来做一些选项的规范,它的一些检测。另外我们还会来做一些合并。

那么什么叫做规范的检测?我们要检测有哪些规范?

首先第一个,我们要检测 components 组件名的规范,然后是 props 传值的规范,还有 inject 的规范,directives 指令的规范等等。

那么我们先来检测,你给我所传过来的组件,它的名称是否是规范的。

因为我们知道在定义组件的时候,我们组件的名称要么就是一个纯字母,要么就一定要是字母加 '-' 组成的。

那么我们就通过 checkComponents 方法来检测,你给我传过来的组件名是否是规范的。

我们可以通过遍历 options.components 来检测它的 key 一定是规范的,然后在调用 validateComponentName 这个方法来检测组件的名称是否是规范的。

然后接下来,我们就需要考虑,组件的名称有哪些是不能写的?

1,很明显,我们不能使用 Vue 内置的标签,比如 slot,component。

2,html 的标签不能使用。

3,svg 的属性名称也不能使用。

然后就是规范了,组件的名称必须是由字母或中横线组成,且必须是由字母开头。

那么我们明确了这些之后,就可以写出这三个方法都逻辑了:

然后我们改变一下组件A的名称,在前面加个下划线,就可以在控制台上面看到:

那么第二个检测我们应该怎么来做呢?

我们可以通过 isBuiltInTag 和 isReservedTag 这两个方法来做。

如果说这两个方法调用的时候,它们的返回值有一个是为 true,那么我们最终的结果就是报错,给出警告。

然后,我们定义 isBuiltInTag 方法,然后在调用 makeMap 方法的时候,我们会把你的返回值给到 isBuiltInTag,然后返回值也一定是个函数。

然后我们就定义 makeMap 这个函数,用来检测 key 是否在 makeMap 它的一个列表里面。

makeMap 方法的第一个参数 str 就是一个字符串,第二个参数就是你要不要把我当前的这个字符串变成小写。

然后我们可以定义一个对象,在把 str 里面所有的值都存储在这个对象里面,并且给它为 true。然后在通过传过来的标识 toLowerCase 来决定返回的匿名函数的值。

匿名函数的作用是检测 key 在我们这个map列表里面是否有这个属性,如果有直接返回出去就好了。

那么我们传入的 toLowerCase 有什么作用呢?

如果第二个参数有传 true,那么在返回的同时,我们会把所有的属性统一变成小写。

如果没有,那么就直接的返回当前map列表的值就好了

这时候,我们在更改下组件名称为内置组件 component,就可以看到控制台的报错信息了:

发布了61 篇原创文章 · 获赞 3 · 访问量 4388

猜你喜欢

转载自blog.csdn.net/weixin_43921436/article/details/100087080
vue