vue生命周期钩子函数详细示例代码GIF动态图解释

最新推荐文章于 2024-05-07 01:42:29 发布

JackieDYH

最新推荐文章于 2024-05-07 01:42:29 发布

阅读量450

点赞数 1

分类专栏： Vue 文章标签： vue javascript nodejs vue生命周期生命周期钩子函数

本文链接： https://blog.csdn.net/JackieDYH/article/details/106693922

版权

Vue 专栏收录该内容

316 篇文章 79 订阅

订阅专栏

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

生命周期	阶段	描述
beforeCreated	创建前	vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。
created	创建后	vue实例的数据对象data有了，$el还没有。
beforeMount	模板载入前	vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换
mounted	模板载入后	vue实例挂载完成，data.message成功渲染。
beforeUpdate	组件更新前	组件更新之前调用
updated	组件更新后	组件更新之后调用
beforeDestroy	组件销毁前	调用$destroy方法后，立即执行beforeDestroy
pdestroyed	组件销毁后	组件销毁后调用，此时只剩下dom空壳

1、页面渲染期

beforeCreate() created() 页面创建之前 / 完成

beforeMount() mounted(）页面挂载之前 / 完成

2、页面更新期

beforeUpdate() updated() 页面更新之前 / 完成

3、页面销毁

beforeDestroy() destroyed() 页面销毁之前 / 完成

动态演示图

注意：当你销毁vue实例后，再去挂载，你会发现，页面更新期钩子函数失效了

实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="../node_modules/vue/dist/vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg">
        <p>{{ msg }}</p>
    </div>
    <button class="destroy">销毁</button>
    <button class="mount">挂载</button>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                msg:"vue生命周期"
            },
            // 1执行顺序和声明顺序无关
            //页面渲染期
            beforeCreate(){
                console.log('--------beforeCreate 创建之前--------');
                console.log('$el:',this.$el);//undefined
                console.log('$data:',this.$data);//undefined
                console.log('this.msg:',this.msg);//undefined
            },
            created(){
                console.log('--------created 创建完成--------');
                console.log('$el:',this.$el);//undefined
                console.log('$data:',this.$data);//Object
                console.log('this.msg:',this.msg);//vue生命周期
            },
            beforeMount(){
                console.log('--------beforeMount 挂载之前--------');
                console.log('$el:',this.$el);//<div id="app">.值还没有解析.</div>
                console.log('$data:',this.$data);//Object
                console.log('this.msg:',this.msg);//vue生命周期
            },
            mounted(){
                console.log('--------mounted 挂载完成--------');
                console.log('$el:',this.$el);//<div id="app">.已经解析成data中对应值.</div>
                console.log('$data:',this.$data);//Object
                console.log('this.msg:',this.msg);//vue生命周期
            },
            // 2页面更新期
            beforeUpdate(){
                console.log('--------beforeUpdate 更新之前--------');
                console.log('$el:',this.$el);//<div id="app">.已经更新成data中对应值.</div>
                console.log('$data:',this.$data);//Object
                console.log('this.msg:',this.msg);//vue生命周期更新了
            },
            updated(){
                console.log('--------updated 更新完成--------');
                console.log('$el:',this.$el);//<div id="app">.已经更新成data中对应值.</div>
                console.log('$data:',this.$data);//Object
                console.log('this.msg:',this.msg);//vue生命周期更新了
            },
            // 3页面销毁
            beforeDestroy(){
                console.log('--------beforeDestroy 销毁之前--------');
                console.log('$el:',this.$el);//<div id="app">.data中对应值.</div>
                console.log('$data:',this.$data);//Object
                console.log('this.msg:',this.msg);//vue生命周期
            },
            destroyed(){
                console.log('--------destroyed 销毁完成--------');
                console.log('$el:',this.$el);//<div id="app">.data中对应值.</div>
                console.log('$data:',this.$data);//Object
                console.log('this.msg:',this.msg);//vue生命周期
            }
        });
        // console.log(vm);
        const desBtn = document.querySelector(".destroy");
        const mouBtn = document.querySelector(".mount");
        desBtn.onclick = function(){
            vm.$destroy();//销毁vue实例
        }
        mouBtn.onclick = function(){
            vm.$mount();//挂载vue实例 但 更新周期 不会执行了
        }
    </script>
</body>
</html>

JackieDYH

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue生命周期钩子函数详细示例代码GIF动态图解释

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期1、页面渲染期beforeCreate()created() 页面创建之前 / 完成beforeMount()mounted(）页面挂载之前 / 完成2、页面更新期beforeUpdate()updated() 页面更新之前 / 完成3、页面销毁beforeDestroy...
复制链接

扫一扫