VUE2.x 源码阅读

Vue构造函数1.验证Vue是否通过new构造2.调用 this._init函数

vm._isVue = true;

function Vue (options)

建立vue实例与页面的关系

vm.$mount(vm.$options.el);

Vue.prototype._init = function (options)

var uid$3 = 0;vm._uid = uid$3++;

initEvents(vm);

1.处理组件 options 时，options 一般从vue实例的构造函数上拿options。2.可以获取到组件 parentVNode 和 parent vue实例3.根据vue的规则，把 parent上的属性写入当前组件

1.检查使用的局部组件 options.components 名称是否合法2.把提供的非标准 options.props、options.inject、options.directives 数组结构标准化为vue定义的对象标准结构3.处理 options.extends、options.mixins 合并以 options.mixins 合并生命周期举例，最终合并的  option为 {    created:[span style=\"font-size: inherit;\

if (!options.render) {............}

initData(vm);

设置vm._uid1.保证vue实例唯一2.uid全局自增，步长为1

初始化 vue 实例基础 _event 属性，    1.如果 $options 中存在 parentListeners，那么将合并 | 更新这些 listeners。    2.listeners和 v-on 存在关联关系

构造流程

如果开启 performance 功能，那么可以追踪vue重要操作（初始化、编译、渲染，打补丁）的性能https://developer.mozilla.org/zh-CN/docs/Web/API/Performancehttps://cn.vuejs.org/v2/api/#performance

initProvide(vm); // resolve provide after data/props

initInjections(vm); // resolve injections before data/props

过渡函数，无逻辑

没有提供 options.render 时，会从提供的 options.template、 el元素本身的outerHtml或者是 innerHtml 产生一个模板字符串这个模板字符串将参与挂载步骤中，最重要的逻辑。最后会根据 template 以及编译选项，编译字符串模板产生 页面的渲染函数 render 函数

挂载逻辑

slot 解析逻辑

开始

处理非组件逻辑

performance

el = el && query(el);

初始化 props/methods/data/computed/watch

   initState(vm);

this._init

initProxy(vm);

1.避免 vue 实例本身被 observe 处理2.避免通过 $set 操作在vue实例上的内容3.避免通过  $del 删除在vue实例上的内容

提供一个用于更新视图的函数 vm._update

initRender(vm);

处理 组件/非组件 options全局options 好处在于可以像定义 http 拦截器一样，在执行某个生命周期钩子前做某事

new Vue({})

1. 被 observe 的 data 的 每个字段都会绑定一个 Dep 实例。此实例用于管理字段订阅的所有事件。2.当 data 数据发生变化时，会触发 Dep 的 notify 方法3. Watcher 和 direactives 等实现 update() 函数的对象可以被加入 Dep 的 Subs 订阅者事件列表4.通过指令可以产生 Watcher，当 Watcher 的 update 被执行时，会触发页面渲染 5.当 Dep 触发 notify 时， 将循环调用 Subs.update 函数，此时通知 Watcher 实例，执行页面渲染

当 options 中没有提供render 函数时，使用默认的render函数 createEmptyVNode

处理组件逻辑

初始化 vue methods循环处理 options.methods ，把 method 定义到 vue 实例上1.如果method 不是 function ，会警告2.如果 props 的 key 和 methods 的key 一样，会警告，因为 props 也会定义到 vue实例上，会冲突 methods优先级更高。3. 如果 methods 的key 存在 vue 实例上，并且 key 的 首字母是 _ 或者 $ 时，会警告4.如果 method 不是一个函数，那么会强制变为 noop 函数

初始化 provide 的值，将用于子组件 inject 1.如果是对象，那么就直接定义 vue._provided = provide2.如果是函数，那么 vue._provide = provide()

初始化vue实例相关的基础属性和生命周期钩子状态标识     1.使用 while 循环获取当前vue实例的 $parent 实例。使当前实例可以通过 this.$parent 获取父实例      2.确定 $root 根实例，为 this.$parent.$root 或 this 当前实例     3.建立 $parent 实例和当前实例的关联 ， $parent.$children.push(vm)     4.定义生命周期钩子标识 _isMounted，_isDestroyed，_isBeingDestroyed 等

vue global api

initLifecycle(vm);

根据 el 的值，确定一个真实dom 元素，这个 el 可能是 dom 元素，可能是一个选择器

处理options对象【组件和非组件逻辑有差异】

$watch