一、生命周期过程解释
实例创建之后，初始化事件和生命周期，而后触发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
组件销毁完成。常在该时机移除耗时操作，比如计时器等
四、温馨提示
更多博文，请关注公众号：xssy5431 【小拾岁月】
扫码：