vue源码阅读

Posted 2020-12-28 sherlock09

一 一个实例

    如果简单了解过些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、injectcomputed、directives、filter、data,为了轻松的走完整个流程，这里不展开

    更具体的流程如下：

    

 

三 一个嵌套的三元表达式

    看这些复杂的合并代码有点脑壳疼，作者还特别秀的写了个嵌套的三元表达式，他长这样。

    

    

四 

 

    总结一下Vue的初始化：Vue的初始化主要就干了这么几件事：合并配置、初始化生命周期、初始化事件和渲染逻辑、初始化data做数据劫持，这种把不同的功能和逻辑部分

拆分成一个个单独的模块，使得Vue的核心加载过程一目了然，这种编程思想是十分值得借鉴的。