VUE页面生命周期钩子函数

一个前端女子

已于 2022-09-21 15:01:27 修改

阅读量4k

点赞数 1

分类专栏： vue2 文章标签： vue.js

于 2022-03-31 10:26:13 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44173499/article/details/123865070

版权

vue2 专栏收录该内容

43 篇文章

订阅专栏

本文详细介绍了Vue实例的生命周期，包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等关键阶段。在不同生命周期阶段，我们可以执行不同的操作，如在created阶段可以初始化数据，在mounted阶段可以访问DOM元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

预备知识：

1.vue的生命周期生命周期函数，又叫钩子函数 生命周期钩子===生命周期函数===生命周期事件

什么是生命周期
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。

3.vue中的生命周期函数，一般都是成对出现

4.10个生命周期函数： vue 实例被创建一直到 vue 实例被销毁

beforecreate --- vue实例创建之前

created -----------vue实例创建之后

beforemounte ---DOM挂载之前

mounted -----------DOM挂载之后

beforeupdate ---数据更新之前

updated -----------数据更新之后

beforeDestroy ---组件销毁之前

destroyed ----------组件销毁之后

“创建期间”的生命周期方法
beforeCreate --- vue实例"创建前"
在调用beforeCreate的时候，仅仅表示vue实例刚刚被创建出来，此时此刻还没有初始化好vue实例中的数据和方法，
所以此时此刻不能访问vue实例中保存的数据和方法。

created -----------vue实例"创建后"

beforemounte ---DOM挂载之前

mounted -----------DOM挂载之后
“运行期间”的生命周期方法
beforeupdate ---数据更新之前（----视图层中的数据的前后变化）

updated -----------数据更新之后（----视图层中的数据的前后变化）
“销毁期间”的生命周期方法
beforeDestroy ---组件销毁之前

destroyed -----------组件销毁之后

beforecreate&created、beforemounte&mounted

代码：

Markup

<!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">
<h1 id="title">{{message}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
message:'妞妞早上好呀'
},
computed:{

},
watch:{

},
// beforeCreate vue实例创造前
beforeCreate(){
console.log('vue实例创建前');
console.log('----------'+this.$el);
console.log('----------'+this.$data)
console.log('----------'+this.message);
},
//vue实例创造之后，可以操作数据
created:function(){
console.log('vue实例创建后');
console.log('----------'+this.$el);
console.log('----------'+this.$data)
console.log('----------'+this.message);
},
// DOM挂载前
beforeMount:function(){
console.log('DOM挂载前');
// 此时的$el为虚拟的DOM节点
console.log('----------'+this.$el);
console.log('----------'+this.$data);
console.log(document.querySelector('#title').innerHTML);
},
// DOM挂载后
mounted :function() {
console.log('DOM挂载后');
// 此时的$el为真是的DOM节点
console.log('----------'+this.$el);
console.log('----------'+this.$data);
console.log(document.querySelector('#title').innerHTML);
},
methods:{
}
})
</script>
</body>
</html>

结果: