Vue2 生命周期详解及与 Vue3 的对比

最新推荐文章于 2024-10-29 11:53:37 发布
最新推荐文章于 2024-10-29 11:53:37 发布
阅读量1.2k 收藏 10
点赞数 27
分类专栏： 前端 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57836225/article/details/142748820
版权

目录

Vue2 生命周期详解及与 Vue3 的对比

一、Vue2 生命周期概述

二、Vue2 生命周期中的关键阶段

1. 组件首次加载执行的生命周期

2. data 和 el 的出现阶段

3. 使用 keep-alive 增加的生命周期

三、Vue2 生命周期在面试中的常见问题

四、Vue2 与 Vue3 生命周期对比

在 Vue 开发中，生命周期是非常重要的概念。它允许我们在不同阶段执行特定的代码，从而更好地控制组件的行为。本文将详细介绍 Vue2 的生命周期，并与 Vue3 进行一些对比，同时提供相关的代码示例。

一、Vue2 生命周期概述

Vue2 版本中有八个系统自带的生命周期函数，分别是：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。

  1. beforeCreate：在实例初始化之后，数据观测和事件配置之前被调用。此时无法访问到 data、computed 和 watch 等属性。
  2. created：在实例创建完成后被立即调用。此时可以访问到 data、computed 和 watch 等属性，但还未挂载到 DOM 上。
  3. beforeMount：在挂载开始之前被调用。
  4. mounted：在挂载完成后被调用。此时组件已经被渲染到 DOM 中，可以访问到 DOM 元素。
  5. beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
  6. updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。
  7. beforeDestroy：在实例销毁之前调用。在这一步，实例仍然完全可用。
  8. destroyed：在实例销毁后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。

二、Vue2 生命周期中的关键阶段

1. 组件首次加载执行的生命周期

当组件首次加载时，会按照 beforeCreate、created、beforeMount、mounted 的顺序执行前四个生命周期函数。例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue2 Lifecycle Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
  <div id="app"></div>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          message: 'Hello Vue2!'
        };
      },
      beforeCreate() {
        console.log('beforeCreate');
      },
      created() {
        console.log('created');
      },
      beforeMount() {
        console.log('beforeMount');
      },
      mounted() {
        console.log('mounted');
      }
    });
  </script>
</body>

</html>

2. data 和 el 的出现阶段

  • 在 created 阶段，有 data 属性，但没有 el（组件的根节点）。
  • 在 beforeMount 阶段，同样没有 el，但有 data。
  • 在 mounted 阶段，既有 el 也有 data。此时组件已经被渲染到 DOM 中，可以访问到 DOM 元素。

例如，可以在代码中打印 this.$el 和 this.$data 来验证：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue2 Lifecycle Data and EL Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
  <div id="app"></div>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          itemNumber: '123'
        };
      },
      beforeCreate() {
        console.log('beforeCreate - No data or el');
      },
      created() {
        console.log('created - Has data:', this.$data.itemNumber);
        console.log('created - No el');
      },
      beforeMount() {
        console.log('beforeMount - Has data:', this.$data.itemNumber);
        console.log('beforeMount - No el');
      },
      mounted() {
        console.log('mounted - Has data:', this.$data.itemNumber);
        console.log('mounted - Has el:', this.$el);
      }
    });
  </script>
</body>

</html>

3. 使用 keep-alive 增加的生命周期

如果在 Vue2 中使用 keep-alive，会增加两个生命周期函数，分别是 activated（进入缓存的组件被激活时调用）和 deactivated（离开缓存的组件被停用时调用）。

例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue2 Lifecycle with Keep-Alive Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
    <button @click="toggleComponent">Toggle Component</button>
  </div>
  <script>
    const ComponentA = {
      template: '<div>Component A</div>',
      beforeCreate() {
        console.log('Component A beforeCreate');
      },
      created() {
        console.log('Component A created');
      },
      beforeMount() {
        console.log('Component A beforeMount');
      },
      mounted() {
        console.log('Component A mounted');
      },
      activated() {
        console.log('Component A activated');
      },
      deactivated() {
        console.log('Component A deactivated');
      }
    };

    const ComponentB = {
      template: '<div>Component B</div>',
      beforeCreate() {
        console.log('Component B beforeCreate');
      },
      created() {
        console.log('Component B created');
      },
      beforeMount() {
        console.log('Component B beforeMount');
      },
      mounted() {
        console.log('Component B mounted');
      },
      activated() {
        console.log('Component B activated');
      },
      deactivated() {
        console.log('Component B deactivated');
      }
    };

    new Vue({
      el: '#app',
      data() {
        return {
          currentComponent: 'ComponentA'
        };
      },
      components: {
        ComponentA,
        ComponentB
      },
      methods: {
        toggleComponent() {
          this.currentComponent = this.currentComponent === 'ComponentA'? 'ComponentB' : 'ComponentA';
        }
      }
    });
  </script>
</body>

</html>

三、Vue2 生命周期在面试中的常见问题

在面试中，关于 Vue2 生命周期的问题可能会涉及以下几个方面：

  1. 进入组件会执行哪些生命周期？

    • 首次进入组件会执行前四个生命周期（beforeCreate、created、beforeMount、mounted）。
    • 如果加入了 keep-alive，第一次进入组件会执行五个生命周期，即前四个加上 activated。第二次或第 N 次进入组件时，如果使用了 keep-alive，则只会执行 activated 生命周期。

  2. 在哪个阶段有 data 和 el？

    • 在 created 阶段有 data，但没有 el。
    • 在 mounted 阶段既有 data 也有 el。

  3. 生命周期在源码中如何呈现？

    • Vue2 的生命周期函数是在源码中按照一定的顺序执行的，通过构造函数和对象的方式进行调用。例如，可以通过 new Vue() 创建实例时传入生命周期函数选项，在构造函数中执行这些函数。同时，data 和 el 的出现也是通过在不同阶段对实例属性的赋值和操作来实现的。

四、Vue2 与 Vue3 生命周期对比

Vue3 对生命周期函数进行了一些调整和优化：

  1. 命名变化：Vue3 中的生命周期函数命名更加简洁，例如 beforeCreate 改为 setup() 执行之前，created 改为 setup() 执行之后。
  2. 新增组合式 API：Vue3 引入了组合式 API，其中 setup() 函数可以替代部分传统生命周期函数的功能，并且更加灵活和易于维护。

例如，在 Vue3 中：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue3 Lifecycle Demo</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
  <div id="app"></div>
  <script>
    const App = {
      setup() {
        console.log('setup - Similar to beforeCreate and created');
        return {};
      },
      beforeMount() {
        console.log('beforeMount');
      },
      mounted() {
        console.log('mounted');
      }
    };

    const app = Vue.createApp(App);
    app.mount('#app');
  </script>
</body>

</html>

总的来说，了解 Vue2 的生命周期对于理解 Vue 的工作原理和进行项目开发非常重要。同时，对比 Vue2 和 Vue3 的生命周期变化，可以更好地适应新版本的开发需求。希望本文对你理解 Vue2 的生命周期有所帮助。

以上内容详细介绍了 Vue2 的生命周期，并加入了 Vue3 的对比和代码示例，可以作为一篇关于 Vue 生命周期的博客文章。在实际应用中，可以根据具体需求进一步深入研究和实践。

阿贾克斯的黎明
关注
专栏目录
vue2和vue3的生命周期（区别以及执行顺序）
weixin_72081046的博客
04-13 3290
此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。同一个阶段的生命周期Vue3先执行，后执行vue2生命周期，然后再执行下一个阶段的生命周期。– 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。– 在卸载组件实例之前调用。修改父组件的数据后触发父组件的。修改子组件的数据后触发子组件的。
Vue2 与 Vue3 生命周期对比
青山不改，绿水长流。
09-22 3388
内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。这个钩子函数获取的数据是更新后的数据，生成新的虚拟dom，跟上一次的虚拟dom结构进行比较，比较出来差异（diff算法）后再渲染真实dom，当数据引发dom重新渲染的时候，在updated钩子函数里面就可以获取最新的真实dom了。vue 实例的 $el 和 data 都已初始化，dom节点马上要被渲染出来了，但是还没有真正的渲染出来,挂载之前为虚拟的 dom节点，模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。
Vue2 VS Vue3 生命周期
前端攻城狮
01-28 947
Vue2 和Vue3 生命周期对比
Vue 2 生命周期与 Vue 3 生命周期：介绍与差别对比
每天都要努力学习哦~~
10-26 3950
Vue 2 生命周期由一系列钩子函数组成，这些钩子函数允许开发者在组件的不同生命周期阶段执行特定的操作。Vue 2 生命周期包括以下阶段：beforeCreate：在实例初始化之后，数据观测 (data observation) 和事件配置 (event/watcher setup) 之前调用。created：在实例创建完成后被调用，此时实例已完成数据观测，但尚未挂载到 DOM 上。在实例创建完成后被立即同步调用。
vue3和vue2生命周期​
myStyle的博客
10-12 1835
在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等。
vue2和vue3生命四种周期函数的比较（详细讲解）
2301_78646673的博客
12-24 1712
vue组件实例在创建时要经历一系列的初始化步骤，在这个过程中vue会在合适的时刻，调用特定的函数，从而让开发者有机会在特定的阶段运行自己的代码，这些特定的函数称为：生命周期函数生命周期整体分为四个阶段，分别是：创建、挂载、更新、销毁。每个阶段都有两个钩子，一前一后。vue3中“创建”只有一个函数了，并且要用到的生命周期函数都要自己先进行引入才能使用。常用的生命周期函数也就：onMounted(挂载完毕)onUpdated(更新完毕)onBeforeUnmount(卸载完毕)
Vue3与Vue2生命周期对比：新特性解析与差异探讨
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
12-21 1417
Vue3新版本的理念成型于 2018 年末，当时的 Vue 2 已经有两岁半了。比起通用软件的生命周期来这好像也没那么久，Vue3在2020年正式推出，在源码和API都有较大变化，性能得到了显著的提升，比Vue2.x快1.2~2倍。
vue组件生命周期详解
01-19
本文实例为大家分享了vue组件生命周期的具体代码，供大家参考，具体内容如下 分为4个阶段： create/mount/update/destroy 每一个阶段都对应着有自己的处理函数 create: beforeCreate created 初始化 mount: ...
关于Vue生命周期详解
10-29
Vue生命周期主要包括以下几个关键阶段： 1. **初始化与创建**： - `beforeCreate`：在实例刚刚创建时被调用，此时数据观测(data observer)和属性(props)已经被设置，但数据尚未初始化，因此在这个阶段访问不到数据...
Vue生命周期详解
热门推荐
Phoneix的博客
06-25 1万+
目录 前言： 一、生命周期流程图详解 1.beforeCreate、Created 2.编辑模板过程 3.beforeMount、Mounted 4.beforeUpdate、Updated 5.beforeDestroy、Destroyed 二、生命周期代码 1.父子组件加载生命周期 2.父子组件更新生命周期 3.父子组件销毁生命周期 前言： 1、什么是vue生命周期？ Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新
vue2和vue3的生命周期
m0_73481765的博客
06-30 2213
在Vue3中，组件的初始化分为创建阶段和设置阶段，beforeCreate 钩子函数在创建阶段被调用，而 created 钩子函数在设置阶段被调用。需要注意的是，Vue3中取消了 `beforeDestroy` 和 `destroyed` 这两个生命周期钩子，取而代之的是 `beforeUnmount` 和 `unmounted`。4. 在 Vue2 中，没有针对响应式数据的生命周期函数，而在 Vue3 中，新增了 beforeUpdate、updated 钩子函数，用于在组件更新之前和之后执行一些操作。
vue2vue3生命周期详解
qq_51649346的博客
09-21 4184
​ 用官方的话来说就是每一个vue实例从创建到销毁的过程。这个过程，vue经历了创建—初始化数据—编译模板—挂载dom—渲染、更新、渲染、卸载等一系列操作。先来看看官方给出的一张图[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传相信这就是"万恶之源"的开始，让我们来仔细看看这到底是个什么意思。
Vue2生命周期、Vue3生命周期及其对比
码农键盘上的梦
12-01 1614
Vue2生命周期、Vue3生命周期及其对比，总结： Vue2和Vue3钩子变化不大，beforeCreate 、created 两个钩子被setup()钩子来替代。
vue2与vue3生命周期学习整理
恒二哥的博客
08-04 1273
通过这些生命周期钩子函数，我们可以在不同的阶段执行相应的操作，比如在setup阶段进行组件的初始化，mounted阶段进行DOM操作，beforeUnmount阶段进行资源清理等。需要注意的是，mounted钩子函数是在实例被挂载到DOM之后被调用的，因此在这个阶段可以访问到实例的DOM元素。除了这些常用的生命周期钩子函数外，Vue2还提供了一些其他的钩子函数，如activated和deactivated，用于处理组件在keep-alive组件中的缓存和激活状态的切换。
vue3和vue2的生命周期，以及各种的使用时机和场景区别以及父子组件之间生命周期的执行顺序进去总结
最新发布
涂涂
10-29 935
功能Vue 2 生命周期Vue 3 生命周期（组合式 API）使用场景数据初始化createdsetup初始化数据、调用 API初次渲染mountedonMountedDOM 操作、动画数据更新updatedonUpdated监听和响应数据变化组件销毁destroyed清理定时器、事件监听依赖追踪不适用调试性能问题在 Vue 3 中，组合式 API 带来了更高的灵活性，支持更加简洁的生命周期钩子函数，同时还允许在setup阶段完成更多初始化工作。
Vue2和Vue3的生命周期的区别和使用方法
m0_67548194的博客
08-02 1098
Vue实例已经初始化data属性和methods中相关方法，可在此阶段调取后端数据，相比于beforeMount（）和mounted（），created（）能更快获取到后端数据，减少页面loading时间。执行该函数时Vue实例仅仅完成自身事件绑定和生命周期函数的初始化工作，Vue实例中还没有Data，el，methods相关属性。数据更新时触发该函数，该函数执行时Vue实例中data数据变化，但页面数据仍为旧数据，即。组件会将数据保留在内存中，比如我们不想每次看到一个页面都重新加载数据，就可以使用。
Vue实例生命周期详解：关键阶段与方法
Vue生命周期是指Vue.js应用中的各个关键阶段，它定义了从实例创建、数据绑定、渲染DOM直到销毁的过程。了解这些生命周期可以帮助开发者更有效地管理代码执行顺序，优化性能，以及确保在特定时间点执行特定任务。 1....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值