new Vue实例化对象时会做哪些事？

超、凢脫俗 2022-10-30 14:24 162阅读 0赞

故心故心故心故心小故冲啊

--------------------

### 文章目录 ###

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]

当`new Vue`实例化对象的时候，最主要的就是执行`this._init()`方法，这个方法是在上面「初始化Vue构造函数」时调用`initMixin()`函数时给`Vue.prototype`上添加的  
![在这里插入图片描述][20210219214006773.png]

所以当我们在执行`new Vue()`的时候，最关键的就是执行`_init()`函数

1.  给`vm`上添加`$options`，如果是非`Component`的话调用`mergeOptions`合并参数
2.  初始化生命周期`initLifecycle`
3.  初始化事件`initEvents`
4.  初始化渲染`initRender`
5.  调用`callHook`函数触发`beforeCreate`钩子函数
6.  调用`initInjections`获取到父组件的`provide`值并加入观察者中
7.  调用`initState`，初始化`data、props、methods、computed、watch`，并为`Vue`实例化对象`vm`添加`watchers`观察者队列
8.  以及调用`initProvide`方法
9.  调用`callHook`函数触发`create`钩子函数  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 1]

总结:  
new Vue实例化对象时会做哪些事？  
在new Vue实例化对象的时候,主要执行了\_init这个初始化的方法  
而\_init这个初始化的方法是在调用initMixin函数时给Vue.prototype加的方法  
那么\_init做了什么也就是new Vue实例化对象会做什么

那么\_init()函数做了什么呢?  
0.给vm加上$options配置  
1.初始化生命周期  
2.初始化事件  
3.初始化渲染  
4.调用callHook函数去执行beforeCreate这个钩子函数  
5.初始化initInjections  
6.初始化状态 也就是初始化data,computer,watch等等这些  
7.初始化initProvide方法  
8.调用`callHook`函数触发`create`钩子函数

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]: /images/20221024/7b088cdfa2cf419186e030ada771c03b.png
[20210219214006773.png]: /images/20221024/e1e7149a498742438202cef1f54a49ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 1]: /images/20221024/51c28fa13a1a44f59ebdfd10ae81313a.png