Vue3 -- 生命周期函数（钩子）

最新推荐文章于 2024-03-27 17:10:07 发布

爱划水de鲸鱼哥～

最新推荐文章于 2024-03-27 17:10:07 发布

阅读量1k

点赞数 2

分类专栏： Vue3 文章标签： vue javascript js

本文链接：https://blog.csdn.net/m0_47901007/article/details/118498206

版权

Vue3 专栏收录该内容

31 篇文章 4 订阅

订阅专栏

文章目录

Vue生命周期
Vue生命周期的作用
生命周期函数（钩子）
Vue生命周期图示
Vue各生命周期函数的描述
代码演示
页面效果
总结

Vue生命周期

Vue 实例从开始创建、初始化数据、编译模板、挂载DOM、更新渲染、卸载等一系列的过程，我们称这是 Vue 的生命周期。

Vue生命周期的作用

Vue 所有功能实现都是围绕生命周期进行；

在不同阶段调用对应的钩子，实现组件数据管理和DOM渲染；

生命周期函数（钩子）

生命周期函数是指在某一时刻自动执行的函数。

Vue生命周期图示

在这里插入图片描述

从图中可以看出，Vue的生命周期包括初始化、挂载、更新和销毁四个阶段，八个生命周期。

Vue各生命周期函数的描述

Vue生命周期函数	描述
beforeCreate()	在实例生成之前，立即执行的函数
created()	在实例生成之后，自动执行的函数
beforeMount()	在组件挂载到页面之前，立即执行的函数
mounted()	在组件挂载到页面之后，自动执行的函数
beforeUpdate()	当数据更新时，立即执行的函数
updated()	当数据更新页面重新渲染后，自动执行的函数
beforeUnmount()	当vue应用销毁时，立即执行的函数
unmounted()	当vue应用销毁时且DOM完全销毁之后，自动执行的函数

代码演示

<!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>vue生命周期函数</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    content: 'Hello Vue.js!'
                }
            },
            beforeCreate(){
                console.log(document.getElementById('root').innerHTML, 'beforeCreate');
            },created(){
                console.log(document.getElementById('root').innerHTML, 'created');
            },beforeMount(){
                console.log(document.getElementById('root').innerHTML, 'beforeMount');
            },mounted(){
                console.log(document.getElementById('root').innerHTML, 'mounted');
            },beforeUpdate(){
                console.log(document.getElementById('root').innerHTML, 'beforeUpdate');
            },updated(){
                console.log(document.getElementById('root').innerHTML, 'updated');
            },beforeUnmount(){
                console.log(document.getElementById('root').innerHTML, 'beforeUnmount');
            },unmounted(){
                console.log(document.getElementById('root').innerHTML, 'unmounted');
            },
            template:'<div>{{content}}</div>'
        })
        const vm = app.mount('#root');
    </script>
</body>
</html>

页面效果

打开浏览器，控制台成功输出：Hello Vue.js!

第一次页面加载会触发beforeCreate() ，created() ，beforeMount() ，mounted()
四个钩子，并只有mounted()输出DOM，结果符合预期。

在这里插入图片描述
更新数据触发beforeUpdate()，updated()，控制台输出符合预期，页面内容更新为hello。

在这里插入图片描述
销毁应用触发beforeUnmount()，unmounted()，控制台输出符合预期,页面内容更新为空。

在这里插入图片描述

总结

第一次页面加载会触发beforeCreate() ，created() ，beforeMount() ，mounted()
更新数据触发beforeUpdate()，updated()
销毁应用触发beforeUnmount()，unmounted()

结语

本小节到此结束，谢谢大家的观看！

如有问题欢迎各位指正

爱划水de鲸鱼哥～

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
4
评论
Vue3 -- 生命周期函数（钩子）

文章目录Vue生命周期Vue生命周期的作用生命周期函数（钩子）Vue生命周期图示Vue各生命周期函数的描述代码演示页面效果总结Vue生命周期Vue 实例从开始创建、初始化数据、编译模板、挂载DOM、更新渲染、卸载等一系列的过程，我们称这是 Vue 的生命周期。Vue生命周期的作用Vue 所有功能实现都是围绕生命周期进行；在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染；生命周期函数（钩子）生命周期函数是指在某一时刻自动执行的函数。Vue生命周期图示从图中可以看出，V
复制链接

扫一扫