深入剖析Vue源码 - 选项合并(上)

对于大部分的前端开发人员来讲，熟练使用vue做项目是第一步，但当进阶后遇到一些特殊场景，解决棘手问题时，了解vue框架的设计思想和实现思路便是基础需要。本专题将深入vue框架源码，一步步挖掘框架设计理念和思想，并尽可能利用语言将实现思路讲清楚。希望您是在熟练使用vue的前提下阅读此系列文章，也希望您阅读后能留下宝贵建议，以便后续文章改进。

  1. <div id="app"></div>
  2. <script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.js"></script>
  3. var vm = new Vue({
  4.   el: '#app',
  5.   data: {
  6.     message: '选项合并'
  7.   },
  8.   components: {
  9.     'components': {}
  10.   }
  11. })

从最简单的使用入手，new一个Vue实例对象是使用vue的第一步，在这一步中，我们需要传递一些基础的选项配置，Vue会根据系统的默认选项和用户自定选项进行合并选项配置的过程。本系列将从这一过程展开，在这一节中我们研究的核心在于各种数据选项在vue系统中是如何进行合并的(忽略过程中的响应式系统构建,后面专题讲解)。

  1. // Vue 构造函数
  2. function Vue (options) {
  3.   if (!(this instanceof Vue)
  4.   ) {
  5.     // 规定vue只能通过new实例化创建，否则抛出异常
  6.     warn('Vue is a constructor and should be called with the `new` keyword');
  7.   }
  8.   this._init(options);
  9. }
  11. // 在引进Vue时，会执行initMixin方法，该方法会在Vue的原型上定义数据初始化init方法，方法只在实例化Vue时执行。
  12. initMixin(Vue);
  14. // 暂时忽略其他初始化过程。。。
  15. ···

接下来，我们将围绕vue数据的初始化展开解析。