从页面渲染的角度理解Vue的源码实现（1）

结合《深入浅出Vue.js》这边书完成了Vue 2.6.11版本的源码阅读，收获还是很大的，之前在部门小组内进行了分享，感觉自己虽然懂了一部分，但是还是没办法成体系的输出自己的收获，打算通过这一系列文章进行分享后，能理解更透彻。

Vue的原型构建

在我们的Vue项目入口文件中，很容易看到

import Vue from 'vue'
...
const app = new Vue({
  router,
  store,
  render: h => h(App)
})
app.$mount('#app')

这样的代码，创建一个Vue实例并挂载到id为app的元素下。那么在创建Vue实例的时候，发生了什么？

让我们直接从源码开始解析！

在Vue2.0中，Vue对象是采用es5的写法去声明的，我们在引入Vue时，执行完initMixin、stateMixin这些方法，完成了对Vue原型的构建，最后在创建实例时，调用了_init方法。

1、initMixin

为入参的原型添加一个_init方法。哦，原来创建Vue实例的时候，就是调用了这里的_init方法。

2、stateMixin

是不是看着有点熟悉？
this.$watch、this.$set、this.$delete？对了stateMixin 就是为Vue原型绑定了这3个常用方法。并且通过Object.defineProperty方法，将 $data、$props指向了实例中的_data、_props属性。

3、eventsMixin

如果说stateMixin是针对属性的功能绑定，那么eventsMixin就是对我们常用的事件相关api的绑定。

4、lifecycleMixin

这个就容易理解了，给原型绑定更新和删除的方法。
提前剧透下，_update方法就是我们常说的Vue diff算法开启的入口，调用后就会进入diff阶段

5、renderMixin

nextTick就不多说了，Vue面试必问！

_render函数作用就是生成VNode树。

installRenderHelpers函数是在入参对象上，绑定一系列渲染辅助函数

总结

创建完成Vue实例后，还需要通过$mount方法，才能让我们在页面看到Vue内容，那么$mount方法做了什么，创建的实例又是什么样子的呢？