vue的生命周期

在使用vue开发的过程中,我们经常会接触到生命周期的问题。那么你知道,一个标准的工程项目中,会有多少个生命周期勾子吗?让我们来一起来盘点一下:

  1. 根组件实例:8个 (beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed)

  2. 组件实例:8个 (beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed)

  3. 全局路由钩子:2个 (beforeEach、afterEach)

  4. 组件路由钩子:3个 (beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)

  5. 指令的周期: 5个 (bind、inserted、update、componentUpdated、unbind)

  6. beforeRouteEnter的next所对应的周期

  7. nextTick所对应的周期

组件实例周期

    

beforeCreate:

在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。

 此时组件的选项还未挂载,因此无法访问methods,data,computed上的方法或数据

created:

实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。这是一个常用的生命周期,因为你可以调用methods中的方法、改变data中的数据,并且修改可以通过vue的响应式绑定体现在页面上、获取computed中的计算属性等等。


beforeMonut:

 在挂载开始之前被调用:相关的 render 函数首次被调用。

mounted:

el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。

1.在这个周期内,对data的改变可以生效。但是要进下一轮的dom更新,dom上的数据才会更新。
2.这个周期可以获取 dom。 之前的论断有误,感谢@冯银超 和 @AnHour的提醒
3.beforeRouteEnter的next的勾子比mounted触发还要靠后
4.指令的生效在mounted周期之前

beforeUpdate:

数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。


updated:

由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。

beforeDestroy

    实例销毁之前调用。在这一步,实例仍然完全可用。

全局路由钩子

作用于所有路由切换,一般在main.js里面定义

router.beforeEach

router.beforeEach((to, from, next) => {
  console.log('路由全局勾子:beforeEach -- 有next方法')
  next()
})
一般在这个勾子的回调中,对路由进行拦截。
比如,未登录的用户,直接进入了需要登录才可见的页面,那么可以用next(false)来拦截,使其跳回原页面。

值得注意的是,如果没有调用next方法,那么页面将卡在那。

next的四种用法
1.next() 跳入下一个页面
2.next('/path') 改变路由的跳转方向,使其跳到另一个路由
3.next(false)  返回原来的页面
4.next((vm)=>{})  仅在beforeRouteEnter中可用,vm是组件实例。

router.afterEach

router.afterEach((to, from) => {
  console.log('路由全局勾子:afterEach --- 没有next方法')
})
在所有路由跳转结束的时候调用,和beforeEach是类似的,但是它没有next方法

组件路由勾子

和全局勾子不同的是,它仅仅作用于某个组件,一般在.vue文件中去定义。

beforeRouteEnter

 beforeRouteEnter (to, from, next) {
    console.log(this)  //undefined,不能用this来获取vue实例
    console.log('组件路由勾子:beforeRouteEnter')
    next(vm => {
      console.log(vm)  //vm为vue的实例
      console.log('组件路由勾子beforeRouteEnter的next')
    })
  }

这个是一个很不同的勾子。因为beforeRouterEnter在组件创建之前调用,所以它无法直接用this来访问组件实例。
为了弥补这一点,vue-router开发人员,给他的next方法加了特技,可以传一个回调,回调的第一个参数即是组件实例。
一般我们可以利用这点,对实例上的数据进行修改,调用实例上的方法。

我们可以在这个方法去请求数据,在数据获取到之后,再调用next就能保证你进页面的时候,数据已经获取到了。没错,这里next有阻塞的效果。你没调用的话,就会一直卡在那

next(vm=>{console.log('next')  })
这个里面的代码是很晚执行的,在组件mounted周期之后。没错,这是一个坑。你要注意。
beforeRouteEnter的代码时很早执行的,在组件beforeCreate之前;
但是next里面回调的执行,很晚,在mounted之后,可以说是目前我找到的,离dom渲染最近的一个周期。

beforeRouteLeave

 beforeRouteLeave (to, from, next) {
    console.log(this)    //可以访问vue实例
    console.log('组件路由勾子:beforeRouteLeave')
    next()
  },

在离开路由时调用。可以用this来访问组件实例。但是next中不能传回调。

beforeRouteUpdate

这个方法是vue-router2.2版本加上的。因为原来的版本中,如果一个在两个子路由之间跳转,是不触发beforeRouteLeave的。这会导致某些重置操作,没地方触发。在之前,我们都是用watch $route来hack的。但是通过这个勾子,我们有了更好的方式。

指令周期

绑定自定义指令的时候也会有对应的周期。


bind

只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

inserted

被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
实际上是插入vnode的时候调用。

update

被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新。

慎用,如果在指令里绑定事件,并且用这个周期的,记得把事件注销

componentUpdated

被绑定元素所在模板完成一次更新周期时调用。

unbind

只调用一次, 指令与元素解绑时调用。

Vue.nextTick、vm.$nextTick

created () {
    this.$nextTick(() => {
      console.log('nextTick')  //回调里的函数一直到真实的dom渲染结束后,才执行
    })
    console.log('组件:created')
  },
nextTick方法的回调会在dom更新后再执行,因此可以和一些dom操作搭配一起用,如 ref。

非常好用,可以解决很多疑难杂症。

场景:
你用ref获得一个输入框,用v-model绑定。
在某个方法里改变绑定的值,在这个方法里用ref去获取dom并取值,你会发现dom的值并没有改变。
因为此时vue的方法,还没去触发dom的改变。
因此你可以把获取dom值的操作放在vm.$nextTick的回调里,就可以了。
转载自:https://segmentfault.com/a/11900000088


<think>嗯,用户想了解Vue.js的生命周期及其各个阶段的钩子函数功能。首先,我需要回顾一下Vue生命周期相关知识。根据提供的引用内容,Vue生命周期分为八个阶段,每个阶段都有对应的钩子函数。用户的问题是要详细解释每个阶段和钩子函数的作用,所以我需要按照生命周期的顺序来组织回答。 首先,我应该先介绍生命周期的整体概念,说明它从实例创建到销毁的整个过程,以及钩子函数的作用。然后分阶段介绍每个钩子函数,比如创建阶段、挂载阶段、更新阶段和销毁阶段。每个阶段里有哪些钩子函数,它们的触发时机和用途是什么。比如在创建阶段,有beforeCreate和created,这两个钩子函数分别在实例初始化之后和数据观测建立之前触发,created之后可以进行数据操作,但DOM还未生成。 接下来是挂载阶段的beforeMount和mounted,这两个钩子涉及模板编译和DOM挂载。beforeMount在模板编译完成但尚未挂载到DOM时触发,而mounted在实例挂载到DOM后触发,适合进行DOM操作或第三方库初始化。 然后是更新阶段的beforeUpdate和updated,当数据变化导致DOM重新渲染时触发,beforeUpdate在虚拟DOM打补丁之前,updated在之后。需要注意的是避免在这两个钩子里修改数据,以免导致无限循环。 最后是销毁阶段的beforeDestroy和destroyed,用于清理工作,如移除事件监听或定时器。beforeDestroy在实例销毁前触发,还可以访问实例,而destroyed之后实例完全被销毁。 另外,需要提到Vue 3中的变化,比如使用setup函数替代了之前的钩子,但用户可能还在使用Vue 2,所以需要区分说明。同时,要强调正确使用生命周期钩子的重要性,比如在created中获取数据,在mounted中进行DOM操作,避免在beforeDestroy中遗漏清理导致内存泄漏。 还要考虑用户可能的后续问题,比如生命周期在实际项目中的应用、Vue 2和3的区别、常见错误处理等,提前准备相关问题。确保回答结构清晰,分点说明每个钩子函数,并引用提供的参考资料来支持内容,比如引用[1]到[4]中的描述。同时注意使用正确的LaTeX格式,虽然这个问题可能不涉及数学公式,但如果有需要的地方要正确应用。 现在需要将以上思考整理成一个结构化的回答,分阶段解释每个钩子函数,确保引用正确,并生成相关问题供用户进一步探索。还要检查是否符合用户的要求,比如使用中文,正确的代码块格式(如果有的话),以及引用标识的添加。</think>### Vue.js 生命周期详解及钩子函数功能 Vue.js 生命周期描述了 Vue 实例从创建到销毁的全过程,开发者可通过生命周期钩子函数在特定阶段执行自定义逻辑。以下按阶段详细说明各钩子函数的功能及触发时机: --- #### 一、**创建阶段** 1. **`beforeCreate`** - **触发时机**:实例初始化后,数据观测(data observer)和事件配置前 - **功能**:此时无法访问 `data` 和 `methods` 中的属性,适合初始化非响应式变量 - 代码示例: ```javascript beforeCreate() { console.log(this.message); // undefined } ``` 2. **`created`** - **触发时机**:数据观测已建立,但 DOM 未生成 - **功能**:可访问 `data` 和 `methods`,常用于异步数据请求(如 API 调用) - 示例: ```javascript created() { this.fetchData(); // 调用接口获取数据 } ``` --- #### 二、**挂载阶段** 3. **`beforeMount`** - **触发时机**:模板编译完成,但尚未挂载到 DOM - **功能**:最后一次操作虚拟 DOM 的机会,但实际 DOM 元素不可见 4. **`mounted`** - **触发时机**:实例挂载到 DOM 后 - **功能**:可操作真实 DOM,适合初始化第三方库(如图表库) - 示例: ```javascript mounted() { this.initChart(); // 渲染图表到 DOM } ``` --- #### 三、**更新阶段** 5. **`beforeUpdate`** - **触发时机**:数据变化后,虚拟 DOM 重新渲染前 - **功能**:可获取数据更新前的 DOM 状态 6. **`updated`** - **触发时机**:虚拟 DOM 重新渲染并应用补丁后 - **注意**:避免在此阶段修改数据,可能导致无限循环 --- #### 四、**销毁阶段** 7. **`beforeDestroy`** - **触发时机**:实例销毁前 - **功能**:清理定时器、解绑事件等资源释放操作 - 示例: ```javascript beforeDestroy() { clearInterval(this.timer); // 清除定时器 } ``` 8. **`destroyed`** - **触发时机**:实例销毁后 - **功能**:所有子实例和事件监听器已被移除 --- ### 生命周期图示 ```plaintext 创建阶段 → 挂载阶段 → 更新阶段 → 销毁阶段 │ │ │ │ beforeCreate beforeMount beforeUpdate beforeDestroy │ │ │ │ created mounted updated destroyed ``` --- ### 注意事项 - **Vue 3 变化**:组合式 API 中使用 `setup()` 替代 `beforeCreate` 和 `created`[^3] - **性能优化**:在 `mounted` 中避免同步修改 DOM,可能导致重复渲染 - **内存泄漏**:务必在 `beforeDestroy` 中清理全局事件监听器 --- §§ 1. Vue 生命周期钩子函数在实际项目中如何选择使用? 2. Vue 2 和 Vue 3 的生命周期有哪些区别? 3. 在 `created` 和 `mounted` 中请求数据有什么区别? 4. 为什么在 `updated` 钩子中修改数据可能导致问题? [^1]: Vue.js组件生命周期详解 [^2]: Vue实例生命周期与功能实现 : Vue.js 核心框架与生命周期阶段 [^4]: Vue实例创建到销毁的全过程解析
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值