Vue生命周期

最新推荐文章于 2024-05-28 10:15:00 发布
最新推荐文章于 2024-05-28 10:15:00 发布
阅读量774 收藏 17
点赞数 31
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CAUC_lin/article/details/135925983
版权

一、Vue生命周期

Vue.js 的生命周期是指一个Vue实例从创建到销毁的整个过程，包括数据初始化、模板编译、挂载到DOM树、渲染、更新以及卸载等阶段。每个阶段都伴随着特定的钩子函数（生命周期钩子），允许开发者在组件的不同阶段执行自定义逻辑。

在Vue 2.x中，生命周期主要包含以下阶段：

  1. 初始化：

    • beforeCreate：在创建Vue实例之前,可以执行这个方法,例如 加载动画操作
    • created：实例已经创建完成，属性已绑定，但DOM还未生成，$el属性还不存在。

  2. 模板编译及挂载前：

    • beforeMount：模板已经在内存中编辑完成了，尚未被渲染到页面中
    • mounted：内存中的模板已经渲染到页面，用户已经可以看见内容

  3. 更新阶段：

    • beforeUpdate：数据更新的前一刻，组件在发生更新之前,调用的函数
    • updated：updated执行时，内存中的数据已更新，并且页面已经被渲染

  4. 销毁阶段：

    • beforeDestroy：钩子函数在实例销毁之前调用
    • destroyed：实例销毁后调用，所有指令解绑，所有数据观察器移除，所有子实例也已经被销毁。

二、代码演示

1、beforeCreate函数在组件实例化之前执行

  1. 代码

    <!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Document</title>
 </head>
 <body>
   <div id="app">
     <button @click="test">测试按钮</button>
     <h1>数据：{{msg}}</h1>
   </div>
 </body>

 <script src="js/vue.min.js"></script>
 <script>
   var Vm = new Vue({
     el: "#app",
     data: {
       msg: "测试数据",
     },
     methods: {
       test: function () {
         alert("测试事件发生！");
       },
     },
     beforeCreate() {
       alert("1.beforeCreate函数在组件实例化之前执行, msg: " + this.msg);
     },
   });
 </script>
</html>

  2. 测试结果

    在这里插入图片描述

注意，此时msg是未定义的，证明Vue实例尚未生成

2、created函数执行时,组件实例化完成,但是DOM(页面)还未生成

  1. 修改代码

    <!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Document</title>
 </head>
 <body>
   <div id="app">
     <button @click="test">测试按钮</button>
     <h1>数据：{{msg}}</h1>
   </div>
 </body>

 <script src="js/vue.min.js"></script>
 <script>
   var Vm = new Vue({
     el: "#app",
     data: {
       msg: "测试数据",
     },
     methods: {
       test: function () {
         alert("测试事件发生！");
       },
     },
     // beforeCreate() {
     //   alert("1.beforeCreate函数在组件实例化之前执行, msg: " + this.msg);
     // },
     created() {
       alert(
         "2.created函数执行时,组件实例化完成,但是DOM(页面)还未生成, msg:" +
           this.msg
       );
     },
   });
 </script>
</html>

  2. 测试结果

    在这里插入图片描述

注意，此时msg是已经有值了，证明Vue实例已经生成，但界面上没有东西，证明dom未生成，页面未渲染

3、 beforeMount函数执行时，模板已经在内存中编辑完成了，尚未被渲染到页面中

  1. 修改代码

    <!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Document</title>
 </head>
 <body>
   <div id="app">
     <button @click="test">测试按钮</button>
     <h1>数据：{{msg}}</h1>

     <h2 id="testBeforeMount">{{msg}}</h2>
   </div>
 </body>

 <script src="js/vue.min.js"></script>
 <script>
   var Vm = new Vue({
     el: "#app",
     data: {
       msg: "测试数据",
     },
     methods: {
       test: function () {
         alert("测试事件发生！");
       },
     },
     // beforeCreate() {
     //   alert("1.beforeCreate函数在组件实例化之前执行, msg: " + this.msg);
     // },
     // created() {
     //   alert(
     //     "2.created函数执行时,组件实例化完成,但是DOM(页面)还未生成, msg:" +
     //       this.msg
     //   );
     // },
     beforeMount() {
       alert(
         "3.beforeMount函数执行时，模板已经在内存中编辑完成了，尚未被渲染到页面中"
       );
       alert(document.getElementById("testBeforeMount").innerText);
     },
   });
 </script>
</html>

  2. 测试结果

    在这里插入图片描述

4、 mounted函数执行时,模板已经渲染到页面,执行完页面显示

  1. 修改代码

    <!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Document</title>
 </head>
 <body>
   <div id="app">
     <button @click="test">测试按钮</button>
     <h1>数据：{{msg}}</h1>

     <h2 id="testBeforeMount">{{msg}}</h2>
   </div>
 </body>

 <script src="js/vue.min.js"></script>
 <script>
   var Vm = new Vue({
     el: "#app",
     data: {
       msg: "测试数据",
     },
     methods: {
       test: function () {
         alert("测试事件发生！");
       },
     },
     // beforeCreate() {
     //   alert("1.beforeCreate函数在组件实例化之前执行, msg: " + this.msg);
     // },
     // created() {
     //   alert(
     //     "2.created函数执行时,组件实例化完成,但是DOM(页面)还未生成, msg:" +
     //       this.msg
     //   );
     // },
     // beforeMount() {
     //   alert(
     //     "3.beforeMount函数执行时，模板已经在内存中编辑完成了，尚未被渲染到页面中"
     //   );
     //   alert(document.getElementById("testBeforeMount").innerText);
     // },
     mounted() {
       alert("4.mounted函数执行时,模板已经渲染到页面,执行完页面显示");
       alert(document.getElementById("testBeforeMount").innerText);
     },
   });
 </script>
</html>

  2. 测试结果

    在这里插入图片描述

5、 beforeUpdate执行时，内存中的数据已更新，但是页面尚未被渲染

  1. 修改代码

    <!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Document</title>
 </head>
 <body>
   <div id="app">
     <button @click="test">测试按钮</button>
     <h1>数据：{{msg}}</h1>

     <!-- <h2 id="testBeforeMount">{{msg}}</h2> -->
     <button @click="change">更新数据</button>
     <h2 id="msgchange">{{msg}}</h2>
   </div>
 </body>

 <script src="js/vue.min.js"></script>
 <script>
   var Vm = new Vue({
     el: "#app",
     data: {
       msg: "测试数据",
     },
     methods: {
       test: function () {
         alert("测试事件发生！");
       },
       change: function () {
         this.msg = "新的数据";
       },
     },
     // beforeCreate() {
     //   alert("1.beforeCreate函数在组件实例化之前执行, msg: " + this.msg);
     // },
     // created() {
     //   alert(
     //     "2.created函数执行时,组件实例化完成,但是DOM(页面)还未生成, msg:" +
     //       this.msg
     //   );
     // },
     // beforeMount() {
     //   alert(
     //     "3.beforeMount函数执行时，模板已经在内存中编辑完成了，尚未被渲染到页面中"
     //   );
     //   alert(document.getElementById("testBeforeMount").innerText);
     // },
     // mounted() {
     //   alert("4.mounted函数执行时,模板已经渲染到页面,执行完页面显示");
     //   alert(document.getElementById("testBeforeMount").innerText);
     // },
     beforeUpdate() {
       alert(
         "5.beforeUpdate执行时，内存中的数据已更新，但是页面尚未被渲染，内存数据msg:" +
           this.msg
       );
       alert(
         "页面显示的内容：" + document.getElementById("msgchange").innerText
       );
       alert("data中msg：" + this.msg);
     },
   });
 </script>
</html>

  2. 测试结果

    在这里插入图片描述

6、 updated执行时，内存中的数据已更新,此方法执行完显示页面!

  1. 修改代码

    <!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Document</title>
 </head>
 <body>
   <div id="app">
     <button @click="test">测试按钮</button>
     <h1>数据：{{msg}}</h1>

     <!-- <h2 id="testBeforeMount">{{msg}}</h2> -->
     <button @click="change">更新数据</button>
     <h2 id="msgchange">{{msg}}</h2>
   </div>
 </body>

 <script src="js/vue.min.js"></script>
 <script>
   var Vm = new Vue({
     el: "#app",
     data: {
       msg: "测试数据",
     },
     methods: {
       test: function () {
         alert("测试事件发生！");
       },
       change: function () {
         this.msg = "新的数据";
       },
     },
     // beforeCreate() {
     //   alert("1.beforeCreate函数在组件实例化之前执行, msg: " + this.msg);
     // },
     // created() {
     //   alert(
     //     "2.created函数执行时,组件实例化完成,但是DOM(页面)还未生成, msg:" +
     //       this.msg
     //   );
     // },
     // beforeMount() {
     //   alert(
     //     "3.beforeMount函数执行时，模板已经在内存中编辑完成了，尚未被渲染到页面中"
     //   );
     //   alert(document.getElementById("testBeforeMount").innerText);
     // },
     // mounted() {
     //   alert("4.mounted函数执行时,模板已经渲染到页面,执行完页面显示");
     //   alert(document.getElementById("testBeforeMount").innerText);
     // },
     // beforeUpdate() {
     //   alert(
     //     "5.beforeUpdate执行时，内存中的数据已更新，但是页面尚未被渲染，内存数据msg:" +
     //       this.msg
     //   );
     //   alert(
     //     "页面显示的内容：" + document.getElementById("msgchange").innerText
     //   );
     //   alert("data中msg：" + this.msg);
     // },
     updated() {
       alert(
         "6.updated执行时，内存中的数据已更新,此方法执行完显示页面!msg:" +
           this.msg
       );
     },
   });
 </script>
</html>

  2. 测试结果

    在这里插入图片描述

码进未来
关注
  • 31
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue生命周期总结
weixin_42823014的博客
03-30 2万+
一、vue生命周期 vue生命周期是什么？ Vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。 vue生命周期可以分为八个阶段，分别是： beforeCreate（创建前）、created（创建后）、beforeMount(载入前)、mounted（载入后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、dest
vue生命周期实例小结
10-18
下面是对Vue生命周期的详细解释： ### 初始化阶段 1. **`beforeCreate`**：在Vue实例被创建但数据观测（data observer）和属性及方法尚未初始化时调用。这个阶段实例还不能访问数据和DOM，通常用于配置实例的外部...
Vue生命周期详解
热门推荐
m0_58709145的博客
10-18 1万+
1.Vue实例从创建到销毁的这一过程叫做vue的生命周期.2.过程:开始创建—>初始化数据—>编辑模板—>挂载DOM($el)---->UI渲染—>数据更新---->卸载。
Vue.js 生命周期详解
最新发布
聚焦于深度解析最新的编程语言特性、框架升级、架构设计、开发工具和最佳实践，涵盖Web前端（如Vue3, React, Angular等）、后端开发（如Node.js, Java, Python等）、移动端开发（iOS, Android原生及跨平台开发）
05-28 3万+
Vue.js 的生命周期是 Vue 实例在其从创建到销毁的过程中的重要阶段。理解这些阶段和钩子函数的调用顺序和作用对于有效地管理组件的行为和状态至关重要。通过合理地使用这些钩子函数，可以帮助开发者编写出更加高效、可维护的代码。
【前端】Vue生命周期函数（详细讲解+中文图解）
山赶着山，山山漫漫结成关
08-09 1万+
Vue生命周期函数（详细讲解+中文图解）
一文教你搞懂Vue生命周期
会写bug的小邓程序员的博客
03-08 1702
vue2生命周期，beforeCreate,created,beforeMounted,mounted,beforeUpdate,update,beforeActived,actived,beforeDestory,destoryed,errorCaptured,watch,computed,props,provide,inject。面试常问问题
Vue 生命周期
01-08
什么是vue的生命周期 Vue 实例从开始创建、初始化数据、编译模板、挂载Dom和渲染、更新和渲染、卸载等一系列过程，这是 Vue 的...vue生命周期在项目中执行的顺序 1.beforeCeate() beforeCeate(){ console.log(this.
浅析Vue 生命周期
08-27
浅析Vue 生命周期 Vue 生命周期是指从 Vue 实例创建到销毁之间的一系列状态，整个过程可以被分为多个阶段，每个阶段都有其特定的钩子函数，可以在不同的生命周期中执行特定的操作。 实例初始化阶段 在创建 Vue ...
vue生命周期图片
09-20
这个图片主要介绍的是vue生命周期的整个过程，从创建到销毁的8个阶段
关于Vue生命周期详解
10-29
关于Vue生命周期详解。 vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。
浅谈vue生命周期共有几个阶段？分别是什么？
10-14
Vue.js的生命周期是指一个Vue实例从创建到销毁的整个过程，包括了多个阶段，每个阶段都有特定的任务和可调用的钩子函数。Vue实例在生命周期中的不同阶段，执行不同的操作，例如数据绑定、DOM操作、事件处理等。了解...
Vue生命周期示例详解
08-30
在深入理解Vue生命周期之前，我们需要了解一些基本概念，如组件、数据绑定和Vue实例。 Vue生命周期涉及到的主要阶段包括： 1. **beforeCreate**：在实例被创建后，但数据观测（data observer）和属性及方法...
vue生命周期
01-08
Vue实例的生命周期是指从创建到销毁的整个过程，包括一系列的初始化、数据观测、编译、挂载、更新和销毁等阶段。Vue提供了多个生命周期钩子函数，让我们可以在特定的时间点插入自定义逻辑。 1. `beforeCreate` 钩子...
Vue生命周期.xmind
01-29
Vue生命周期.xmind
Vue的生命周期有哪些？
tyxjolin的专栏
04-16 1102
Vue.js 的生命周期是一个非常重要的概念，在开发 Vue.js 应用时，我们需要了解组件的生命周期，才能更好地掌握 Vue.js 的使用方式。beforeDestroy：在组件被销毁之前被调用，此时组件还未被销毁，可以进行一些资源的释放操作。destroyed：在组件被销毁之后被调用，此时组件已经被销毁，所有的资源都应该被释放。在这个阶段中，我们可以进行一些资源的释放操作，如取消订阅事件、解除绑定等。
Vue.js 的生命周期
金木编程
11-28 654
Vue.js 的生命周期钩子函数是一组在 Vue 实例生命周期中执行的函数，它们允许你在特定阶段执行自定义逻辑。在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。这些生命周期钩子函数提供了在不同阶段执行自定义逻辑的机会，使你能够更好地理解和控制 Vue 实例的行为。el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。在挂载开始之前被调用：相关的 render 函数首次被调用。被 keep-alive 缓存的组件激活时调用。
Vue——生命周期自己的理解
where_slr的博客
09-09 284
看了官网的Vue生命周期和各路大神的生命周期详解，写了一点自己的见解：
vue 生命周期的理解
10-25
Vue生命周期是指Vue实例从创建到销毁的整个过程，包括了多个阶段，每个阶段都有对应的生命周期函数。Vue生命周期的理解对于开发者来说非常重要，因为它可以帮助我们更好地掌握Vue实例的创建、更新和销毁过程，从而更好地进行开发和调试。Vue生命周期分为8个阶段，分别是：创建前、创建中、创建后、挂载前、挂载后、更新前、更新后和销毁前。在每个阶段中，都有对应的生命周期函数，可以在函数中执行一些操作，比如初始化数据、发送网络请求、注册全局事件等。常用的生命周期函数有beforeCreate、created、mounted、beforeUpdate、updated和beforeDestroy等。在这些生命周期函数中，我们可以访问到Vue实例的各种属性和方法，比如data、methods、props等，从而进行相应的操作。总之，Vue生命周期是Vue框架中非常重要的一部分，对于开发者来说，理解Vue生命周期的原理和使用方法是非常必要的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值