vue 源码

vue 源码_第1张图片

vue 是当先比较火的前端的框架,自己自从从事开发到现在大概有 3 多年的时间了,大部分时间从事与 javascript 相关的开发工作。自己也搭建过 javascript 的前端框架,也深入研究过 angularjs 的数据绑定机理。今天想挑战一下 vue 的源码。

这里自己模仿 vue 写 Zi 吧 Zi(dea) 的 Zi。

有关 javascript 的模块化的管理,现在依旧是没有统一江湖,所以我们这里需要根据使用环境对模块管理支持不同而使用不同的模块化管理,现在主流的模块化管理一般为 CommonJs、amd 和 export 三种方式,一般都是三分天下。 nodejs 是典型的实现 CommonJs 规范来实现模块化管理。amd 模块化管理的代表是 requirejs 。export 这是正中的 es6 模块化管理。

vue 源码_第2张图片
vue 源码_第3张图片

我们发现这里报错没有 __init 方法,我们顺藤摸瓜。来看一看__init 方法是如何实现的。我们就来到了

vue 源码_第4张图片

我们看一看这里_init 方法是在 initMixin 方法中实现的,通过 Vue 的原型对象属性实现对 Vue 的扩展了 _init 方法。

vue 源码_第5张图片

那我们就根据 vue 来实现这样一个方法,方法需要将 Vue 作为参数传入,我们照做。这里我们在看一看 Zi(Vue)这个构造函数出来,也就是是否通过关键字 new 调用的还是普通调用的。

vue 源码_第6张图片

我们通过 (this instanceof Foo) 可以分清 Foo 是通过 new 构造出来的还是通过普通函数调用的,如下图。

vue 源码_第7张图片

好接下来我们研究一下 init 方法,这个应该是 vue 小核心了。


vue 源码_第8张图片

这里多出了两个方法 mergeOptions 和 resolveConstructorOptions 通过函数名称我们可以闻出一些东西,mergeOptions 合并选项,参数名称来看应该是一个将多个对象合并成一个一对象。

vue 源码_第9张图片

resolveConstructorOptions  方法应该是将构造函数解析出一个对象来。

不急我们现在先看一看一些基础方法,然后我们回来再从全局来看一看 vue 。

在绑定前我们进行一系列动作,像初始化生命周期,初始化渲染器,并且回调

vue 源码_第10张图片

然后我们需要将绑定到指定的元素上。

你可能感兴趣的:(vue 源码)