vue源码阅读(二)
一 一个实例
如果简单了解过些Vue的API的话,肯定会对一下这个特别熟悉,在上一篇里,分析了Vue的核心文件core的index.js构造vue函数执行的流程。
那么下边这个则是实例化构造函数,也就是开始使用了,不管是作为框架,还是作为插件,都需要new一下。
千呼万唤,我们把它请出来之后,发现点不同的东西,router、filter、store暂时先不表,但是这个#app是个啥东西?
翻篇回去,先看Vue的构造函数,this._init(options)是调用的第一个方法,包括传进来的参数options,不过在这之前,还判断了下调用Vue的是不是先new出来的。
二 从init方法到Vue初始化做的第一件事
根据注入的文件 找到了 init方法的文件,它是在core/instance/init.js
完整的方法如下
一开始是定义了两个属性 _uid 和_isVue
其中_uid是当前实例的唯一id,而且是递增的实例id 保证不会重复,一般会自动分配,不建议操作,当然如果需要操作的话,可以手动分配
_isVue设置为true,避免监听对象时自身被监听
然后是判断是否定义_isComponent(),这里查了下注释和代码,is_Component = true是指内部的组件实例,而initInternalCompoent()函数是作者对组件内部实例化的优化,
一般我们写的代码都会走else的分支,也就是mergeOptions() 这个方法。
接下来就遇到了第一个比较重要的点,理解mergeOptions这个方法,他定义在工具类的options这个js文件夹下。
首先想到的是为什么要进行策略对象的合并,而且是init的第一步,简单的说,Vue在处理选项的时候,使用了这个策略对象把父子选项进行合并,并将最终的值赋值给实例下
的$options,更直白的说就是把vue实例上原有的属性和传入的option以及继承和构造的所有属性进行递归式的合并,确保一个vue实例是有一个$options.
先说下这个options,当我们new一个vue的实例时,可以传一些数据,比如上面new的函数那样,从前边看,vue的实例在实例化后会加载很多其他的东西,例如生命周期钩子、render函数等等。
而手动传入的这个对象,就叫做options,也是上面vm.$options中传入的第二个参数,关于vm.$options,是一个贯穿整个源码的属性,可以单独拆出来讲,但是为了文章的完整性,先简单说一下,不然后边的这个合并策略对象就会云里雾里。
这是mergeOptions()执行的流程
这函数涉及到了很多复杂的合并策略,包括钩子函数、props、methods、inject\computed、directives、filter、data,为了轻松的走完整个流程,这里不展开
更具体的流程如下:
三 一个嵌套的三元表达式
看这些复杂的合并代码有点脑壳疼,作者还特别秀的写了个嵌套的三元表达式,他长这样。
四
总结一下Vue的初始化:Vue的初始化主要就干了这么几件事:合并配置、初始化生命周期、初始化事件和渲染逻辑、初始化data做数据劫持,这种把不同的功能和逻辑部分
拆分成一个个单独的模块,使得Vue的核心加载过程一目了然,这种编程思想是十分值得借鉴的。