Vue中生命周期钩子函数详解。

最新推荐文章于 2021-11-25 10:07:15 发布

哎呦灬不错呦。

最新推荐文章于 2021-11-25 10:07:15 发布

阅读量193

点赞数

分类专栏：前端 html5 文章标签： vue

本文链接：https://blog.csdn.net/weixin_52583582/article/details/115337826

版权

html5 同时被 2 个专栏收录

37 篇文章 1 订阅

订阅专栏

前端

32 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue组件的生命周期钩子函数，包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed，以及它们在各个阶段的执行特点和应用场景。

摘要由CSDN通过智能技术生成

生命周期

1.定义.

从开始到结束(销毁)的过程就是一个生命周期

钩子函数:在某事某刻自动被触发的函数称之为钩子函数.

2.生命周期钩子函数

beforeCreate 创建之前

创建之前:什么都是undefined
 beforeCreate(){
 console.group('==创建之前==')
 console.log(this.$el);
 console.log(this.$data);
 console.log(this.name);
 console.groupEnd()
 },

created 创建完成

/**
* 创建完成:
*  1.没有找到挂载点,即$el还是undefined
*  2.数据已经存在,此时可以操作数据
*/
created(){
    console.group('==创建完成==')
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.name);
    console.groupEnd() 
},

beforeMount 挂载之前

/**
             * 挂载之前:
             *  1.找到挂载点,但是数据没有被渲染
             *  2.可以操作数据
            */
beforeMount(){
    console.group('==挂载之前==')
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.name);
    console.groupEnd() 
},

mounted 挂载完成

/**
             * 挂载完成:
             *  1.找到挂载点,并且数据已经渲染完成
             *  2.可以操作数据
             * 作用: 发起ajax请求,开启轮播图,计时器.延时器
            */
mounted(){
    console.group('==挂载完成==')
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.name);
    console.groupEnd() 
},

beforeUpdate 更新之前

/**
             * 更新之前:
             *  1.数据已经是最新
             *  2.此时指的是页面再次渲染之前
            */
beforeUpdate(){
    console.group('==更新之前==')
    console.log(this.$data);
    console.log(this.name);
    console.groupEnd() 
},

updated更新完成

/**
             * 更新完成:
             *  1.数据已经是最新
             * 2.此时指的是页面再次渲染完成
            */
updated(){
    console.group('==更新完成==')
    console.log(this.$data);
    console.log(this.name);
    console.groupEnd() 
}

beforeDestroy 销毁之前

    //销毁之前
beforeDestroy(){
    console.group('==销毁之前==')
    console.groupEnd() 
},

destroyed销毁完成

 //销毁完成
destroyed(){
    console.group('==销毁完成==')
    console.groupEnd() 
}

总代码

<!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>Document</title>
    <!-- 1.引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 2.作用域 -->
    <div id="app">
        <div>name的值为:{{name}}</div>
        <input type="text" v-model="name">
        <button>挂载</button>
    </div>
    <script>
        // 3.实例化vue
       const vm =  new Vue({
            // el:'#app',
            data:{
                name:'王运舵'
            },
            methods:{

            },
            
            // 创建之前
            /**
             * 创建之前:什么都是undefined
            */
            beforeCreate(){
                console.group('==创建之前==')
                console.log(this.$el);
                console.log(this.$data);
                console.log(this.name);
                console.groupEnd()
            },
            //创建完成
            /**
             * 创建完成:
             *  1.没有找到挂载点,即$el还是undefined
             *  2.数据已经存在,此时可以操作数据
            */
            created(){
                console.group('==创建完成==')
                console.log(this.$el);
                console.log(this.$data);
                console.log(this.name);
                console.groupEnd() 
            },

            // 挂载之前
            /**
             * 挂载之前:
             *  1.找到挂载点,但是数据没有被渲染
             *  2.可以操作数据
            */
            beforeMount(){
                console.group('==挂载之前==')
                console.log(this.$el);
                console.log(this.$data);
                console.log(this.name);
                console.groupEnd() 
            },

            // 挂载完成
            /**
             * 挂载完成:
             *  1.找到挂载点,并且数据已经渲染完成
             *  2.可以操作数据
             * 作用: 发起ajax请求,开启轮播图,计时器.延时器
            */
            mounted(){
                console.group('==挂载完成==')
                console.log(this.$el);
                console.log(this.$data);
                console.log(this.name);
                console.groupEnd() 
            },

            // 更新之前
            /**
             * 更新之前:
             *  1.数据已经是最新
             *  2.此时指的是页面再次渲染之前
            */
            beforeUpdate(){
                console.group('==更新之前==')
                console.log(this.$data);
                console.log(this.name);
                console.groupEnd() 
            },

            // 更新完成
            /**
             * 更新完成:
             *  1.数据已经是最新
             * 2.此时指的是页面再次渲染完成
            */
            updated(){
                console.group('==更新完成==')
                console.log(this.$data);
                console.log(this.name);
                console.groupEnd() 
            },

            //销毁之前
            beforeDestroy(){
                console.group('==销毁之前==')
                console.groupEnd() 
            },

             //销毁完成
             destroyed(){
                console.group('==销毁完成==')
                console.groupEnd() 
            }
        })

        document.querySelector('button').onclick =function(){
            vm.$mount('#app')
        }
        // console.log(vm);
    </script>
</body>
</html>