生命周期（钩子函数）

Bertha 。 2021-09-15 14:50 478阅读 0赞

# **生命周期（钩子函数）** #

**一、生命周期过程解释**

> 实例创建之后，初始化事件和生命周期，而后触发beforeCreate。beforeCreate，当前实例创建之前，很少操作，一般用于加载动画，比如创建一个菊花旋转。created表示当前实例创建完成，组件、属性等初始化完成，一般封装一个方法，比如getDataFromNetwork，从网络请求数据。this.getDataFromNetwork()调用，触发回调，关闭beforeCreated中的菊花加载动画。当前实例创建完成，页面还未渲染未显示，拿不到DOM元素。而后，判断实例中是否有el属性（挂载点），如果有，继续往下；如果没有，然后判断是不是有vm.$mount，两者二选其一，接着判断有没有template，如果有，触发渲染函数，进入beforeMount，表示将要挂载，页面仍未显示，接着创建vm.$el,接着触发mounted，此时可以操作dom，beforeUpdate与update保持数据与页面的同步，会频繁触发，一般不要进行操作。接下来，destroyed表示组件销毁，destroy的中一般用于取消计时器，取消观察者等等。

**二、流程图说明**

> **![70][]**

**三、具体钩子介绍**

> ①beforeCreate  
> 组件实例将要创建，一般在该时机，开启加载一个动画。  
> ②created  
> 组件实例创建完成，在该时机可以访问实例中的data的属性和methods中的方法，但不能操作dom。因为页面还未加载成功，页面未显示。  
> 注意：调用methods中的方法，完成网络请求，vue推荐的两种数据获取方式  
> 1、beforeRouteEnter 该路由加载之前请求数据，数据请求完成执行next（），显示目标路由（优点：保证页面显示时，一定可以拿到数据）  
> 2、created，在该时机发起请求，获取数据  
> ③beforeMount  
> 组件实例将要挂载到挂载点,页面未显示，开发中很少使用  
> ④mounted  
> 组件模板已经渲染到指定的el，页面显示，可以操作dom。  
> ⑤beforeUpdate  
> 组件将要更新  
> ⑥updated  
> 组件更新完成  
> 注意：关于update的钩子函数，都是页面动态渲染有关，每当数据变化是，变会页面更新，都会触发这些钩子，这些钩子的触发频率很高，我们极少操作，即便操作，也要保证内部方法轻量级。  
> ⑦beforeDestroy  
> 组件将要销毁  
> ⑧destroyed  
> 组件销毁完成。常在该时机移除耗时操作，比如计时器等

**四、温馨提示**

**更多博文，请关注公众号：xssy5431 【小拾岁月】**

**扫码：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70][]

[70]: /images/20210802/48a7ed083e8e4ff496e8dd1fcee8a224.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70]: /images/20210802/728de675ee294a34a9560fa8d806414f.png