Vue 首次渲染的过程
本博客将以断点的形式带大家了解一下，Vue在首次渲染的情况下经历了哪些过程，顺便对最近Vue2.6 源码的学习，进行总结一下。
前期准备：
1. Vue2.6 源码的 clone
2. 浏览器，我用的是 google
3. 浏览器内断点
4. 下面流程图为全部过程，后续还需新增
一、前期准备详细-内容
1. 首先将 Vue2.6 源码 clone 下来, 我们可以看到下面的目录，目录介绍
2. 在 examples 文件下新建 examples/03-initVue/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 首次渲染的过程</title>
</head>
<body>
<div id="app">
<div>
<h1>Hello World</h1>
</div>
{{msg}}
</div>
</body>
<script src="../../dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue'
}
})
</script>
</html>
3. 在浏览器打开 index.html 文件
4. 在浏览器-> 鼠标右键 -> 检查 -> Source内找下面文件进行断点， 我们在这里需要设置4个断点的地方，顺便在最右边的地方，Watch中添加Vue的监听
1. 第一个断点：vue2.6/src/core/instance/index.js
2. 第二个断点：vue2.6/src/core/index.js
3. 第三个断点：vue2.6/src/platforms/web/runtime/index.js
4. 第四个断点：vue2.6/src/platforms/web/entry-runtime-with-compiler.js
1. 第一个断点：
1. 与平台无关 ， [ ... ]Mixin 主要作用是给 Vue的原型上挂载实例成员
2. F10 执行initMixin() 方法，查看 Vue监听的地方，Vue/prototype 下新增了 _init 这个实例
3. F10 执行stateMixin() 方法，查看 Vue监听的地方，Vue/prototype 下新增了 $delect, $set, $watch, [ $data, $props 的初始化 ] , 并对 $data, $props 变为响应式。
4. F10 执行eventsMixin() 方法，查看 Vue监听的地方，Vue/prototype 下新增了 $emit, $off, $on, $once
5. F10 执行lifecycleMixin()方法，查看 Vue监听的地方，Vue/prototype 下新增了 $destroy, $forceUpdate, _update
6. F10 执行renderMixin() 方法，查看 Vue监听的地方，Vue/prototype 下新增了 $nextTick, _render，_o, _n, _s ....一些后续我们会需要到的js方法
2. 第二个断点：
1. 与平台无关，初始化Vue的静态成员
2. F11 进入 initGlobelAPI方法， 则新增Vue的 delect, nextTick, observable, options, set, util, 这些静态成员，在options 对象中新增 components ， directives， filters， _base这些属性，
3. F10 进入 initUse 方法，新增Vue的use静态成员
4. F10 进入 initMixin 方法，新增Vue的 mixin 静态成员
5. F10 进入initExtend 方法，新增Vue的 extend 静态成员
6. F10 进入initAssetRegisters(Vue) 方法，新增Vue 中新增了 components ， directives， filters 静态成员，这个地方需要注意的是，这次绑定到了Vue上不是 Vue.options上
3. 第三个断点
1. 与平台有关
2. Vue.config.[.....] 主要是注册平台相关的方法，比如指令和组件
3. Vue.options.directives 中主要 新增 v-model, v-show 这两个指令
4. Vue.options.components 中主要 新增了 Transition， TransitionGroup 这两个组件
5. Vue.prototype._patch_ 在Vue原型上挂载_patch_方法 ，将虚拟Dom转换为真实Dom
6. Vue.prototype.$mount 主要是将 Dom的形式挂载到界面上，并将compileToFunction 返回的值 = Vue.compile
7. 进入 mountComponent 方法，重新获取 el
4. 第四个断点
1. 在打包编译的阶段，重写$mount. 把模版编译为Render函数的方法
2. 新增compile方法，作用：手动把模版转换成Render函数
总结：
Vue首次渲染主要做了两大操作：
1. 初始化实例成员和静态成员，这是跟平台无关的
1. 实例成员中：实例相关内容，包括实例方法，事件，生命周期
2. 静态成员中：添加了全局方法，也就是添加在Vue对象上的方法， 比如 Vue.use, Vue.extend, Vue,mixin， Vue.set等。
2. 初始化了组件，模版，指令，这是跟平台有关的
1. 运行环境：需要处理的指令，组件，模块，
2. 编译环境：需要处理的指令，组件，模块
3. 将模版转换成 render函数
4. $mount 方法中，主要在 Dom渲染之前，触发beforeMount方法，
3. 然后创建渲染Watcher，挂载beforeupdate生命周期的方法，
4. 调用mountComponent 方法，通过render 函数转换虚拟Dom, 并将虚拟Dom，再转换成真实Dom，显示到界面， 触发mounted方法。
这是我做的总结文档，有需要的小伙伴，可以查看哦
https://pan.wps.cn/l/susnl0bXl8nP?f=130
[文档] Vue 首次渲染的过程.pof
