第三节：VUE生命周期

已于 2022-08-22 14:20:39 修改
阅读量79 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
于 2022-08-16 00:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43220836/article/details/126269196
版权

第三节：VUE生命周期

文章目录

生命周期可以理解为三部分，第一部分为初始化Vue实例的过程，第二部分为数据渲染，更新Dom的过程，第三部分为销毁实例的过程，每一个部分都有对应的钩子函数来完成对应的部分过程。

初始化阶段的钩子函数：

​ beforeCreate() 实例创建前：数据和模板均未获取到
​ created() 实例创建后: 最早可访问到 data 数据，但模板未获取到
​ beforeMount() 数据挂载前：模板已获取到，但是数据未挂载到模板上
​ mounted() 数据挂载后： 数据已挂载到模板中

更新阶段的钩子函数：

​ beforeUpdate() 模板更新前：data 改变后，更新数据模板前调用

​ updated() 模板更新后：将 data 渲染到数据模板中

**销毁阶段的钩子函数: **

​ beforeDestroy() 实例销毁前

​ destroyed() /实例销毁后

1、beforeCreate

Vue 实例创建前被调用，数据和模板均未获取到

官方解释：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
说明：这个时候this还不能使用，data中的数据、methods中的方法，以及watcher中的事件都不能获得。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        {{msg}}
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        const author = 'xiaoge';
        var vm = new Vue({
            el: '#app',
            data: {
                msg: "Vue 实例创建前被调用，数据和模板均未获取到"
            },
            beforeCreate () {
                console.log('beforeCreate', this.$el, this.$data)
            }
        })
    </script>
</body>

</html>

2、created

Vue实例创建后，最早可以获取到 data数据的钩子，但是模板未获取到

官方解释：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el属性目前不可见。
说明：这个时候可以操作vue中的数据和方法，但是还不能对dom节点进行操作。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        {{msg}}
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        const author = 'xiaoge';
        var vm = new Vue({
            el: '#app',
            data: {
                msg: " Vue实例创建后，最早可以获取到 data数据的钩子，但是模板未获取到"
            },
            created () {
                console.log('created', this.$el, this.$data)
            }
        })
    </script>
</body>

</html>

3、beforeMount

数据挂载之前，获取到了模板，但是数据还未挂载到模板上

官方解释：在挂载开始之前被调用：相关的render 函数首次被调用。
说明：$el属性已存在，是虚拟dom，只是数据未挂载到模板中。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        {{msg}}
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        const author = 'xiaoge';
        var vm = new Vue({
            el: '#app',
            data: {
                msg: "数据挂载之前，获取到了模板，但是数据还未挂载到模板上"
            },
            beforeMount () {
                console.log('beforeMount', this.$el, this.$data)
            }
        })
    </script>
</body>

</html>

4、mounted

数据已经挂载到模板中了

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

注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick替换掉 mounted

说明：挂载完毕，这时dom节点被渲染到文档内，dom操作在此时能正常进行5、beforeUpdate

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        {{msg}}
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        const author = 'xiaoge';
        var vm = new Vue({
            el: '#app',
            data: {
                msg: "数据已经挂载到模板中了"
            },
            mounted () {
                console.log('mounted', this.$el, this.$data)
            }
        })
    </script>
</body>

</html>

5、beforeUpdate

当data 数据更新之后，去更新模板中的数据前调用

官方解释：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
说明：beforeUpdate是指view层的数据变化前，不是data中的数据改变前触发。因为Vue是数据驱动的。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        {{msg}}
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        const author = 'xiaoge';
        var vm = new Vue({
            el: '#app',
            data: {
                msg: "当data 数据更新之后，去更新模板中的数据前调用"
            },
            beforeUpdate () {
                console.log('beforeUpdate', this.$el, this.$data)
            }
        })
    </script>
</body>

</html>

6、updated

当data 数据更新之后，去更新模板中的数据调用

官方解释：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher取而代之。

注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick替换掉 updated：

说明：view层的数据更新后，data中的数据同beforeUpdate，都是更新完以后的。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        {{msg}}
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        const author = 'xiaoge';
        var vm = new Vue({
            el: '#app',
            data: {
                msg: "当data 数据更新之后，去更新模板中的数据调用"
            },
            updated () {
                console.log('updated', this.$el, this.$data)
            }
        })
    </script>
</body>

</html>

7.beforeDestroy

销毁 Vue 实例之前调用

官方解释：实例销毁之前调用。在这一步，实例仍然完全可用。

说明：提示vue行数即将销毁

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        {{msg}}
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        const author = 'xiaoge';
        var vm = new Vue({
            el: '#app',
            data: {
                msg: "销毁 Vue 实例之前调用"
            },
            beforeDestroy () {
                console.log('beforeDestroy', this.$el, this.$data)
            }
        })
    </script>
</body>

</html>

8、destroyed

销毁 Vue 实例之后调用

官方解释：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
说明：执行destroy方法后，对data的改变不会再触发周期函数，此时的vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        {{msg}}
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        const author = 'xiaoge';
        var vm = new Vue({
            el: '#app',
            data: {
                msg: "销毁 Vue 实例之后调用"
            },
            destroyed () {
                console.log('destroyed', this.$el, this.$data)
            }
        })
    </script>
</body>

</html>

总结

钩子函数用途

​ 每一个钩子函数在特定的阶段执行，可以利用不同钩子函数的特性，实现不同的功能。

created函数是最早可以获取到 data数据的钩子，可以发送 ajax 异步请求，向后台请求数据。
mounted函数是数据已经挂载到模板中了，但是data数据一旦更新就会使虚拟DOM重新渲染页面，也是可以发送 ajax 异步请求，向后台请求数据。
beforeDestroy函数时是在销毁 Vue 实例之前调用，可以用于处理一些收尾工作。

mount

在执行created钩子函数之后获取到了data数据，但是没有获取模板，此时会问你Vue实例中是否存在"el"选项，如果没有，就会使用这个方法手动挂载一个"el"选项。

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

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>

<body>
   <div id="app">
       {{msg}}
   </div>
   <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	<script>
       var vm = new Vue({
           data:{
               msg:'测试钩子函数'
           },
       }).$mount("#app") //手动挂在el选项
   </script>
</body>

</html>


<!DOCTYPE html>
<html>

<head>
    <title>案例</title>
</head>

<body>
    <div id="app" @click="change">
        <p>{{message}}</p>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                message: '今天是周一！！！'
            },
            beforeCreate () {
                console.group('beforeCreate 创建前状态==========>>');
                console.log("%c%s", "color:red", "el     : " + this.$el);   //undefined
                console.log("%c%s", "color:red", "data   : " + this.$data); //undefined
                console.log("%c%s", "color:red", "message: " + this.message);   //undefined
            },
            created () {
                console.group('created 创建完毕状态==========>>');
                console.log("%c%s", "color:red", "el     : " + this.$el);   //undefined
                console.log("%c%s", "color:red", "data   : " + this.$data); //[object Object]
                console.log("%c%s", "color:red", "message: " + this.message);   //今天是周一！！！
            },
            beforeMount () {
                console.group('beforeMount 挂载前状态==========>>');
                console.log("%c%s", "color:red", "el     : " + this.$el);   //[object HTMLDivElement]
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data); //[object Object]
                console.log("%c%s", "color:red", "message: " + this.message);   //今天是周一！！！
            },
            mounted () {
                console.group('mounted 挂载结束状态==========>>');
                console.log("%c%s", "color:red", "el     : " + this.$el);   //[object HTMLDivElement]
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data); //[object Object]
                console.log("%c%s", "color:red", "message: " + this.message);   //今天是周一！！！
            },
            beforeUpdate () {
                console.group('beforeUpdate 更新前状态==========>>');
                console.log("%c%s", "color:red", "el     : " + this.$el);   //[object HTMLDivElement]
                console.log(this.$el);
                console.log(this.$el.innerHTML);    //<p>今天是周一！！！</p>
                console.log("%c%s", "color:red", "data   : " + this.$data); //[object Object]
                console.log("%c%s", "color:red", "message: " + this.message);   //今天周二了！！！
            },
            updated () {
                console.group('updated 更新完成状态==========>>');
                console.log("%c%s", "color:red", "el     : " + this.$el);   //[object HTMLDivElement]
                console.log(this.$el);
                console.log(this.$el.innerHTML);    //<p>今天周二了！！！</p>
                console.log("%c%s", "color:red", "data   : " + this.$data); //[object Object]
                console.log("%c%s", "color:red", "message: " + this.message);   //今天周二了！！！
            },
            beforeDestroy () {
                console.group('beforeDestroy 销毁前状态==========>>');
                console.log("%c%s", "color:red", "el     : " + this.$el);   //[object HTMLDivElement]
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data); //[object Object]
                console.log("%c%s", "color:red", "message: " + this.message);   //今天周二了！！！
            },
            destroyed () {
                console.group('destroyed 销毁完成状态==========>>');
                console.log("%c%s", "color:red", "el     : " + this.$el);   //[object HTMLDivElement]
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data); //[object Object]
                console.log("%c%s", "color:red", "message: " + this.message);   //今天周二了！！！
            },
            methods: {
                change () {
                    this.message = "今天周二了！！！";
                    console.group("==============点击事件执行的方法==============>>");
                    console.log("%c%s", "color:red", "el     : " + this.$el);   //[object HTMLDivElement]
                    console.log(this.$el);
                    console.log("%c%s", "color:red", "data   : " + this.$data); //[object Object]
                    console.log("%c%s", "color:red", "message: " + this.message);   //今天周二了！！！
                }
            }
        })
    </script>
</body>

</html>
小戈&328
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue生命周期
01-08
Vue实例的生命周期是指从创建到销毁的整个过程，包括一系列的初始化、数据观测、编译、挂载、更新和销毁等阶段。Vue提供了多个生命周期钩子函数，让我们可以在特定的时间点插入自定义逻辑。 1. `beforeCreate` 钩子...
5.Vue的生命周期.zip
09-17
在这个"5.Vue的生命周期.zip"中，我们很显然会深入探讨Vue组件的生命周期。Vue组件的生命周期是指一个组件从创建、初始化、渲染、更新到销毁的过程，每个阶段都有特定的方法和钩子函数，开发者可以利用这些钩子进行...
第40节: Vue3 注册生命周期钩子
特创数字
12-24 474
在UniApp中使用Vue3框架时，你可以注册生命周期钩子来执行特定的逻辑。在上面的示例中，我们使用了onMounted和生命周期钩子。onMounted钩子在组件挂载后执行，而钩子在组件卸载前执行。在onMounted钩子中，我们可以在控制台输出一条消息，表示组件已经挂载。在钩子中，我们也可以在控制台输出一条消息，表示组件即将卸载。通过注册生命周期钩子，你可以在组件的生命周期的不同阶段执行特定的逻辑。
第八章：vue生命周期、vue的DOM操作、mixin混入，插件
张晨光老师的播客
06-15 720
vue/cli 脚手架：vue.js==={1.vue的核心代码 2.vue的模板编译器}开发过程中当多个组件开发时有相同类名时，此时vue会按照组件的导入顺序进行解析，后导入的组件 会覆盖先导入的组件类名样式通过在样式表的< style>标签中添加scoped属性可以让样式只在当前组件内起作用。原理是 添加过scoped属性后，vue会自动的在该组件的标签前添加 一个自定义的属性名，然后通过属性选择器去确定到底使用哪个样式内容。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img
春招冲刺（七）：Vue生命周期
AAliuxiaolei的博客
03-05 1213
Vue 实例从创建到销毁的过程为生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，称之为 Vue 的生命周期。
超详细vue生命周期解析(详解)
热门推荐
weixin_42707287的博客
12-25 12万+
vue是每一个前端开发人员都绕不过的一个技术，在国内的市场占有量也是非常的大，我们大部分人用着vue, 却不知道他内部其实经历了一些什么。每个生命周期又是什么时候开始执行的。我们今天来详细的看一看 首先，生命周期是个啥？ 借用官网的一句话就是：每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。那么这些过程中，具体vue做了些啥，我们今天来了解一下。 语述 了解之前，我们先贴上一张官网的.
vue3从精通到入门12：vue3的生命周期
qq_40358970的博客
04-03 1381
onBeforeMount、onMounted、onBeforeUpdate、onUpdated 和 onUnmounted 生命周期钩子，它们分别在组件的不同生命周期阶段被调用。这些函数允许你在组件的不同状态下执行特定的逻辑
Vue生命周期钩子的理解
01-08
Vue.js 是一款流行的前端JavaScript框架，它为开发者提供了丰富的功能，其中包括组件的生命周期管理。Vue组件的生命周期是指从创建到销毁的整个过程，Vue通过一系列的钩子函数（Lifecycle Hooks）来帮助我们在特定...
vue-examples:vue练习
04-01
10. **插件系统**：Vue的生态系统强大，有许多第三方插件，如axios用于HTTP请求，element-ui提供丰富的UI组件库，vue-router用于路由管理，vuex管理状态，等等。 通过这些核心概念的学习和实践，开发者可以逐步精通...
VUE组件练习：VUE.rar
11-30
7. **生命周期钩子**：Vue组件有自己的生命周期，包括初始化、挂载、更新和卸载等阶段。每个阶段都有对应的钩子函数，如beforeCreate、created、beforeMount、mounted等，开发者可以在这些钩子中执行自定义逻辑。 8...
使用Vue实现点击页面触发特效
qq_45569925的博客
07-19 724
在页面上的指定区域内进行点击，则会在页面上显示设置好的随机文本，此文本出现后会执行动画，动画效果为节点在1s之内向右上方移动并在移动的过程中完成180°翻转，最后消失。
Django+vue自动化测试平台（28）-- ADB获取设备信息
测试小老弟的博客
07-17 408
adb的全称为Android Debug Bridge，就是起到调试桥的作用。通过adb可以在Eclipse中通过DDMS来调试Android程序，说白了就是调试工具。adb的工作方式比较特殊，采用监听Socket TCP 5554等端口的方式让IDE和Qemu通讯，默认情况下adb会daemon相关的网络端口，所以当我们运行Eclipse时adb进程就会自动运行。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1228
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
element-plus的el-table自定义表头筛选查询
i_am_a_div的博客
07-17 404
element-plus的el-table自定义表头筛选查询
7.17（nodejs、vue、SSH服务、SSH免密登录）
m0_71589190的博客
07-17 1095
nodejs、vue、SSH服务、SSH免密登录
【Vue】`v-on` 指令详解：事件绑定与处理的全面指南
最新发布
lph159的博客
07-19 267
v-on是 Vue.js 用于事件监听的指令，可以绑定原生 DOM 事件或自定义事件。其基本语法如下：
vue、js截取视频任意一帧图片
weixin_43728978的博客
07-17 911
vue、js对video视频中的某一帧截取，截取视频封面
我在vue2重生之vite加强版
许发君博客
07-17 389
需要引入相关插件进行自动引入。
Vue3获取路由参数、包含获取路径参数
weixin_46607967的博客
07-17 246
该demo使用了重定向 把123和456 分别设置为id和name 通过路由传参 传递给重定向后的 url 路由。这里业务逻辑为 跳转到url页面 同时接收到123和456参数。如实际项目不需要 则按需修改 一条路由也可实现。route为路由信息 query为获取的路由参数。如果是通过url传参 可直接在组件内使用。在 url 页面中正常获取路由参数即可。如果参数直接在路径中 可参考。中对 url路由 进行修改。该条路由表信息使用了。
2023年最全Vue面试题：Vue生命周期函数及适用场景
2023年最全vue面试题大全 本文总结了2023年最全的vue面试题大全，包括vue生命...内容涵盖了vue生命周期的概念、第一次页面加载触发的钩子以及每个生命周期适合的场景。希望对于读者在面试或学习vue过程中有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小戈&328

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值