前端每日一练：深入理解new Vue 构造函数的初始化过程

在前端开发中，Vue.js 是一个非常流行的 JavaScript 框架，它提供了一种数据驱动的方式来构建 Web 界面。Vue 的核心是 Vue 构造函数，它负责创建 Vue 实例并管理整个应用的生命周期。在本文中，我们将深入探讨 Vue 构造函数的初始化过程，了解 Vue 实例是如何被创建和初始化的。

1. Vue 构造函数的初始化

1. vue只能通过new关键字初始化

2. 合并传入的options

3. 初始化生命周期

4. 初始化事件中心

5. 初始化渲染

6. 初始化data

7. 初始化props

8. 初始化computed

9. 初始化watch

10. 最后检测是否有el属性，有的话就把上面渲染好的代码挂载到页面上

Vue构造函数的核心代码只有一行：this._init(options)
_init 方法中主要做了下边几件事情：

合并配置：_init 的参数 options 就是 new Vue(options) 时传入的选项，在这里通过 mergeOptions 方法把 options 合并到 vm.$options 中。
调用 initLifecycle(vm)、initEvents(vm)、initRender(vm)、initState(vm) 函数进行生命周期的初始化、事件中心的初始化、渲染的初始化、data、props、computed、watch的初始化等等。其中 initState 就是将vue实例中的data、props、computed、watch等数据项做进一步得处理，其实就是做代理以及转化成可观测对象。
另外，我们可以看到在 initState(vm) 执行之前，我们执行了 beforeCreate 方法，在 initState(vm) 执行之后，我们执行了 created 方法。因此在 beforeCreate 方法中，我们无法直接引用data，method，computed，watch等在 initState(vm) 中才开始存在的属性。
检测是否有el属性，有的话就调用 vm.$mount(vm.$options.el) 进行挂载渲染成真实dom。