生命周期(钩子函数)

一.生命周期过程解释:

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

二、流程说明图：

三。具体钩子介绍：

①beforeCreate

组件实例将要创建，一般在该时机，开启加载一个动画。

②created

组件实例创建完成，在该时机可以访问实例中的data的属性和methods中的方法，但不能操作dom。因为页面还未加载成功，页面未显示。

注意：调用methods中的方法，完成网络请求，vue推荐的两种数据获取方式

1、beforeRouteEnter 该路由加载之前请求数据，数据请求完成执行next（），显示目标路由（优点：保证页面显示时，一定可以拿到数据）

2、created，在该时机发起请求，获取数据

③beforeMount

组件实例将要挂载到挂载点,页面未显示，开发中很少使用

④mounted

组件模板已经渲染到指定的el，页面显示，可以操作dom。

⑤beforeUpdate

组件将要更新

⑥updated

组件更新完成

注意：关于update的钩子函数，都是页面动态渲染有关，每当数据变化是，变会页面更新， 都会触发这些钩子，这些钩子的触发频率很高，我们极少操作，即便操作，也要保证内部方法轻量级。

⑦beforeDestroy

组件将要销毁

⑧destroyed

组件销毁完成。常在该时机移除耗时操作，比如计时器等