vue的生命周期

本文详细探讨了Vue实例从创建到销毁的各个生命周期阶段,包括创建(实例)、载入(数据)、更新和销毁。在创建阶段,介绍了created和beforeMount的区别,以及在不同阶段可以进行的操作,如初始化数据和操作DOM。在载入阶段,讨论了beforeMount和mounted的时机,以及何时适合进行DOM操作。在更新阶段,阐述了beforeUpdate和updated的用途。最后,讲解了销毁前和销毁后的生命周期钩子,以及在何时可以进行资源清理。此外,还提供了一些常见的面试题及答案,帮助读者更好地理解和应用Vue的生命周期。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

概念

借用官网的一句话就是:每一个vue实例从创建到销毁的过程,就是这个vue实例的生命周期。在这个过程中,他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。
在这里插入图片描述

可以理解vue生命周期就是指vue实例从创建到销毁的过程,在vue中分为8个阶段:创建前/后,载入前/后,更新前/后,销毁前/后。

一、创建(实例)

1、beforeCreate:这个阶段实例已经初始化,只是数据观察与事件机制尚未形成,不能获取DOM节点(没有data,没有el)
使用场景:因为此时data和methods都拿不到,所以通常在实例以外使用
2、created:实例已经创建,仍然不能获取DOM节点(有data,没有el
使用场景:模板渲染成html前调用,此时可以获取data和methods,so 可以初始化某些属性值,然后再渲染成视图,异步操作可以放在这里

二、载入(数据)

1、beforeMount:是个过渡阶段,此时依然获取不到具体的DOM节点,但是vue挂载的根节点已经创建(有data,有el
2、mounted:数据和DOM都已经被渲染出来了
使用场景:模板渲染成html后调用,通常是初始化页面完成后再对数据和DOM做一些操作,需要操作DOM的方法可以放在这里

三、更新

1、beforeUpdate:检测到数据更新时,但在DOM更新前执行
2、updated:更新结束后执行
使用场景:需要对数据更新做统一处理的;如果需要区分不同的数据更新操作可以使用$nextTick

四、销毁

1、beforeDestroy:当要销毁vue实例时,在销毁前执行
2、destroyed:销毁vue实例时执行

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{{message}}</p>
        <button @click="changeMsg">改变</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'hello world'
        },
        methods: {
            changeMsg () {
                this.message = 'goodbye world'
            }
        },
        beforeCreate() {
            console.log('------beforeCreate初始化前------')
            console.log(this.message)
            console.log(this.$el)
        },
        created () {
            console.log('------created初始化完成------')
            console.log(this.message)
            console.log(this.$el)
        },
        beforeMount () {
            console.log('------beforeMount挂载前---------')
            console.log(this.message)
            console.log(this.$el)
        },
        mounted () {
            console.log('------mounted挂载完成---------')
            console.log(this.message)
            console.log(this.$el)
        },
        beforeUpdate () {
            console.log('------beforeUpdate更新前---------')
            console.log(this.message)
            console.log(this.$el)
        },
        updated() {
            console.log('------updated更新后---------')
            console.log(this.message)
            console.log(this.$el)
        }
    })
</script>

</html>

打印的数据:
在这里插入图片描述

从上面我们可以看出几点,

  • 首次,只执行了4个生命周期,beforeCreate,created, beforeMount, mounted
  • created中,我们可以拿到data中的message数据了,因为初始化已经完成
  • beforeMount中,我们可以看出,我们拿到了$el,而mounted中,我们也拿到了$el, 不过好像有点不一样是吧。一个好像是渲染前的,一个是渲染后的。对的。看过MVVM响应式原来或者Vue源码你们就会发现,最初其实我们是会去让this.$el = new Vue时传入的那个el的dom。所以在beforMount中,其实我们拿到的就是页面中的#app。而再继续往后,首先我们是不是没有找到render函数啊,也没有找到template啊,所以他会怎么做啊,是不是会把我们的这个el(#app)编译成template模板啊,再转换为render函数,最后将render函数渲染成为真实dom,渲染成真实dom后,我们是不是会用这个渲染出来的dom去替换原来的vm.$el啊。这也就是我们前面所说到的替换$el是什么意思了。
  • 所以, 在mounted中,我们所得到的渲染完成后的$el

下面我们再看个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{{message}}</p>
        <button @click="changeMsg">改变</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'hello world'
        },
        template: '<div>我是模板内的{{message}}</div>',
        methods: {
            changeMsg () {
                this.message = 'goodbye world'
            }
        },
        beforeCreate() {
            console.log('------beforeCreate初始化前------')
            console.log(this.message)
            console.log(this.$el)
        },
        created () {
            console.log('------created初始化完成------')
            console.log(this.message)
            console.log(this.$el)
        },
        beforeMount () {
            console.log('------beforeMount挂载前---------')
            console.log(this.message)
            console.log(this.$el)
        },
        mounted () {
            console.log('------mounted挂载完成---------')
            console.log(this.message)
            console.log(this.$el)
        },
        beforeUpdate () {
            console.log('------beforeUpdate更新前---------')
            console.log(this.message)
            console.log(this.$el)
        },
        updated() {
            console.log('------updated更新后---------')
            console.log(this.message)
            console.log(this.$el)
        }
    })
</script>

</html>

我们在new Vue实例的时候直接传入了一个template,这时候我们再看输出
在这里插入图片描述
这么看是不是就很清晰了啊 ,在beforeMount的时候,$el还是#app, 但是在mounted的时候就变成模板的div了,是不是因为我们传了个template啊,所以,他直接将这个template转换成render函数啦。再渲染成真实dom后,用渲染出来的真实dom替换了原来的$el

面试题

什么是 vue 生命周期?有什么作用?

答:每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生命周期钩子 的函数,这给了用户在不同阶段添加自己的代码的机会。(ps:生命周期钩子就是生命周期函数)例如,如果要通过某些插件操作DOM节点,如想在页面渲染完后弹出广告窗, 那我们最早可在mounted 中进行。

created和mounted的区别

created:一般是在html渲染前的操作,此时el还是undefined,data已经存在。这里不能对dom进行操作

mounted:一般是在html渲染完成后的操作,此时el,data都已经加载完成,一般对dom的操作都写在mounted中,例如获取innerHTML,初始化echarts的时候

第一次页面加载会触发哪几个钩子?

答:beforeCreate, created, beforeMount, mounted

vue获取数据在哪个周期函数

答:一般 created/beforeMount/mounted 皆可。
比如如果你要操作 DOM , 那肯定 mounted 时候才能操作。

简述每个周期具体适合哪些场景

  • beforeCreate:在new一个vue实例后,只有一些默认的生命周期钩子和默认事件,其他的东西都还没创建。在beforeCreate生命周期执行的时候,data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法

  • create:data 和 methods都已经被初始化好了,如果要调用 methods 中的方法,或者操作 data 中的数据,最早可以在这个阶段中操作

  • beforeMount:执行到这个钩子的时候,在内存中已经编译好了模板了,但是还没有挂载到页面中,此时,页面还是旧的

  • mounted:执行到这个钩子的时候,就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段,进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点,最早可以在和这个阶段中进行

  • beforeUpdate: 当执行这个钩子时,页面中的显示的数据还是旧的,data中的数据是更新后的, 页面还没有和最新的数据保持同步

  • updated:页面显示的数据和data中的数据已经保持同步了,都是最新的

  • beforeDestory:Vue实例从运行阶段进入到了销毁阶段,这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于可用状态。还没有真正被销毁

  • destroyed: 这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于不可用状态。组件已经被销毁了。

参考

超详细vue生命周期解析(详解)

<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、付费专栏及课程。

余额充值