vue源码学习笔记1

最近有些无聊，来看看vue的源码吧！

首先先找到vuejs的源码先，在平时开发的环境里（node-modules）找到vue的文件夹，而后在dist文件夹里就能够找到它了。

打开一看，一万多行！ 无从下手啊，不要紧。搜索“function Vue”，在4710行找到了vue的构造函数，

好短啊，怎么只有这么点（其余的应该在原型链上）。

迎面先来一个if，"development" !== 'production'貌似是打包环境之类的配置相关，这个先跳过。

this instanceof Vue的意思其实看warn也能看出来了，意思就是Vue是一个构造函数须要配合new来使用。

接下来的是_init的函数，查找一下先，在4576行找到了它。可是它是包含在一个initMixin函数中的，这个函数又是干吗用的呢，先在这插个眼，我要先去找找这个initMixin是在什么地方被调用的。

好吧该函数在4719行被自行调用的，

传送回去看_init先，

先建立函数内部变量Vm指向this，而后建立一个内部uid=外部的uid+1，猜想这是一个当前实例的id吧

而后下面又是这个生产环境的问题，跳过。

接下来：

很显然_insComponent这个属性通常刚开始是没有的，先走else，在当前实例建立一个了$options的属性，出现了一个新函数，先找找在哪定义的。

参数先无论，这个checkComponents函数看了一下大体就是为了检查对象内的组件是否可使用（组件名称格式经过以及不能使用内置组件的名称），内部还循环调用了一个validateComponentName的函数

回到mergeOptions，下面接着是normalizeProps，在1361行找到了它，

看下来总结就是检测options里的prop是否为对象或者纯对象（dom对象等都不算），而后把props里的对象名称驼峰化。

再次回到mergeOptions，接下来normalizeInject，因该是相似上面的方法，跳过。再下来是normalizeDirectives 。。也跳过

而后：

var extendsFrom = child.extends;
    if (extendsFrom) {
        parent = mergeOptions(parent, extendsFrom, vm);
      }
复制代码

options里有extends么？查了一下是和mixins相似的属性，mixins又是什么。。。 （minxins混入对象请自行查询）

接下来就是对mixins属性对象的处理了，总的来讲这两个属性就是会自带vue的实例对象或者函数，也须要进行净化内部数据（mergeOptions（））。

而后：

先新建一个options，而后分别循环vue构造函数和准备新建实例的options，在这里面有一个mergeField的函数， 先看第一行：

var strat = strats[key] || defaultStrat;
复制代码

这里要注意的是，strats实际上是只是用来建立一个空对象的小勾子：

在vue的 https://cn.vuejs.org/v2/api/#optionMergeStrategies中写着，这是一个自定义合并策略的选项。

如今就很明显了，mergeOptions这个函数是用来净化实例options各个key的，而后把构造函数里的各个key和新实例中的各个key进行合并，若是碰到同名属性，以实例的为准（这个很好理解，css的样式优先级也是这样，范围越小优先度越高）