动力节点Vue源码分析视频教程

有很多小伙伴都是通过Vue js视频教程来学习的，Vue.js 的源码使用了Flow做静态类型检查，之所以选择Flow ， 是因为 Babel和 ESlint 都有对应的Flow插件支持语法。

Vue的初始化过程

Vue的本质上就是一个用Function实现的Class类，然后它的原型prototypey以及它本身都扩展了一系列的方法和属性。

在 import Vue 的时候，会执行core 文件夹中的 index.js , 通过 instance文件夹中的index.js文件给Vue的prototype上扩展一些方法;通过 initGlobalAPI 方法扩展 nextTick 、set、del 等全局静态方法。

new Vue的时候，会调用 this._init 方法， 通过该方法，合并配置、初始化生命周期、初始化事件中心、初始化渲染、初始化data 、props、computed、watcher 等等。初始化最后，检测到如果有el 属性，则调用 vm.$mount 方法挂载vm, 把模板渲染成最终的DOM 。

$mount 方法 先对 el 做了限制 ， Vue 不能挂载在 body 、html 这样的根节点上。Vue组件的最后渲染都需要render方法，如果没有定义render 方法，则会把 el 或者 template 字符串转换成 render 方法，这个过程是Vue的一个在线编译过程，它是通过 compileToFunctions 方法实现的。

$mount 方法支持传入两个参数，第一个是 el ，表示挂载的元素，可以是字符串，也可以是DOM对象，如果是字符串在浏览器环境下会调用 query 方法转换成DOM对象;第二个参数是和服务端渲染相关。

$mount 方法实际上调用的是 mountComponent 方法，mountComponent 方法的核心是先调用 vm._render 方法生成虚拟DOM , 再实例化一个渲染 Watcher (观察者) ， 在它的回调函数中会调用 updateComponent 方法，最终调用vm._update更新DOM 。

Watcher 在这里的作用，一是初始化的时候会执行回调函数，二是当 vm实例中的监测的数据发生变化的时候执行回调函数。函数最后判断为根节点的时候设置 vm._isMounted 为 true , 表示这个实例已经挂载了，同时执行 mounted 钩子函数。 vm.$vnode 表示 Vue实例的父虚拟 Node , 为 null 时表示当前是 根Vue 的实例。

vm._render 方法最终是通过执行 createElement 方法并返回 vnode , 它是一个虚拟 node ，接下来通过 vm._update 方法渲染成一个真实的DOM并渲染出来

vm._update 被调用的时机有两个，一是首次渲染，二是数据更新的时候。vm._update的核心是调用 vm._patch_ 方法，这个方法在web 和 weex 平台上的定义是不一样的。 该方法内部 调用 insert 方法把DOM插入父节点中。

patch的整体流程：createComponent -> 子组件初始化 -> 子组件render -> 子组件patch 嵌套组件的插入顺序是先子后父

Vue各组件间合并配置过程：对于options的合并方式有2种，子组件初始化过程通过 initInternalComponent 方式要比外部初始化Vue通过 mergeOptions 的过程要快，合并完的结果保留在 vm.$options 中。

源码中最终执行生命周期的函数都是调用 callHook 方法

如果大家对此比较感兴趣，想了解更多相关知识，可以关注一下动力节点的Java视频教程，里面的课程内容由浅到深，通俗易懂，适合小白学习，希望对大家能够有所帮助。