Vue 源码(九):Vue

今天项目终于赶完了,写篇博客庆祝下吧。

♪(^∀^●)ノ

首先我们先到官网上面,可以看到 Vue 是有一些内置的组件的。

当然除了它们之外,还会有一些我们自己编写的组件,以及我们还会引用一些别人的组件,也就是第三方的应用组件。

那我们还可以发现一个很有意思的事情,我们在自己所编写的组件里面,我们也可以来使用这些内置的组件,这究竟是为什么呢?

它们是通过什么样的方式来串联的呢?

其实它们就是通过原型链的方式来串联的。

今天这篇博客,我们就来聊一下这些资源选项的自定义策略。

那资源选项里面有哪些东西呢?那么我们仍然可以直接查看源码里面,它有哪些内容。

我们直接复制一份,到我们自己所写的 Vue 中。

然后我们可以发现一个问题。

这些选项真正在使用的时候,我们都会在后面加上一个 s,比如 'components','directives','filters'。

那为什么我们在 ASSET_TYPES 里面没有给它加上 s 呢?

原因很简单,因为这种东西它的应用场景很广泛,ASSET_TYPES 这个数组,我们不仅仅是在资源选项自定义策略这里用得到,我们在给 Vue 扩展一些静态的方法的时候,也是需要用到的。

所以 Vue 在设计的时候,在后面就没有直接给它加上 s。

那么我们继续回到代码上面,ASSET_TYPES 使用的方式也很简单。和我们上面写的钩子函数自定义策略是一样的。

我们直接的给 ASSET_TYPES 这个数组来进行遍历。

在遍历的过程中,值的就是 'component','directive','filter'。

然后我们需要加上一个 s,因为我们这里是来做一些资源选项的自定义策略。

那么接下来,我们要想清楚,是谁调用的 mergeAssets 方法。

和上面的 mergeHook 一样,我们是在 mergeField 方法中的 result(parent[key], child[key], vm, key) 来调用的。

那么同样的,我们也是接收4个参数 parentVal, childVal, vm, key。

那么我们接下来要做的事情就很简单了。

我们知道,Vue 里面是有内置一些组件的,比如:keep-alive,transition,transition-group 等等。

那么我们先来模拟一下,它们所对应的都是一个空对象。

那么我们前面有说过,我在自定义组件也好,还是第三方组件也好,我们自己写的组件里面都可以使用内置组件。

为什么,因为我们会给它们创建一个原型链的关系。那么我们怎么来搭建这个原型链的关系呢?

首先,我们先写一个最简单的 new Vue(),传一个组件就行。

那么 parentVal 指的是谁呢?我们可以打印一下看看。

可以看到,parentVal 指的是 Vue.options.components。

然后我们会创建一个空对象,并且指定它的原型为 parentVal。

最终我们要做的事情,就是把这个对象的引用,也就是 res 给 return 出去。

但是首先的话,我们要来做一个事情。

我们会来判断 childVal 是否存在。

如果 childVal 是存在的,那我们就先来检测一下,你的这个 key 所指向的值,它是不是一个对象。

如果说不是一个对象,那么我就会给你显示一个报错信息。

在这里我们就是先做一个检测,一定要保证我们当前的 childVal 是一个 object,然后我们才能继续往下走。

接下来,我们就会进行对象的合并,合并谁,合并 res 和 childVal。

res 指的就是一个空对象,但是它有一个特点,就是 res.__proto__ 指向的是 Vue.options.components。

Vue.options.components 里面有哪些东西呢?就是我们添加的一些内置组件。

那么接下来,我们就需要把 childVal 里面的值,合并到 res 这个空对象里面去。

我们可以来写一个 extend 方法来进行合并:extend(to, _from)。

其实很简单,就是通过 for in 的方式来遍历 _from,然后找到 _from 里面的每项成员,最终在拓展到 to 身上去就好了。

_from 指的就是 childVal,也就是我们在 new Vue() 的时候,传过来 components 的这个对象。

然后我们可以打印看下。

可以看到,components 里面就有一个我们自己定义的 component-a 这个组件。

然后还可以看到,它的 __proto__ 可以找到我们当前 Vue 里面的内置组件。

这也就说明了,为什么我们能够在自定义的组件里面,可以使用内置组件的原因。

因为我们可以通过原型链的方法依次的去查找到它们。

这个就是 components 合并的策略,也是整个组件合并的策略。

当然,除了组件之外,我们还会有指令,过滤器等等。

如果说我们要来进行一些自定义的指令,过滤器方法的话,那我们是不是和 components 是一样用法呢?

首先我先看一下,我内置的有哪些指令,然后我再把内置的指令,方法都给你搭建一个原型链的关系就可以了。

这就是我们整个的资源合并的策略。

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

猜你喜欢

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