生命周期（钩子函数）

最新推荐文章于 2024-07-26 08:45:03 发布

CHH5431

最新推荐文章于 2024-07-26 08:45:03 发布

阅读量1.4w

点赞数 11

分类专栏： Vue 文章标签：生命周期钩子函数

本文链接：https://blog.csdn.net/qq_41115965/article/details/80796101

版权

Vue 专栏收录该内容

76 篇文章 8 订阅

订阅专栏

本文详细介绍了Vue.js组件的生命周期过程，包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等钩子函数的作用及应用场景。重点讲解了在不同阶段可以进行的操作，如数据请求、DOM操作等，并提醒在updated钩子中避免进行重型操作以保证性能。同时，推荐了beforeRouteEnter和created两个阶段进行数据获取的方法。

摘要由CSDN通过智能技术生成

生命周期（钩子函数）

一、生命周期过程解释

实例创建之后，初始化事件和生命周期，而后触发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
组件销毁完成。常在该时机移除耗时操作，比如计时器等