（十一）vue实例的生命周期

最新推荐文章于 2022-08-02 20:57:15 发布

lw_1994

最新推荐文章于 2022-08-02 20:57:15 发布

阅读量353

点赞数 1

分类专栏： vue 文章标签： vue vue生命周期

本文链接：https://blog.csdn.net/lw_1994/article/details/83990567

版权

vue 专栏收录该内容

23 篇文章 2 订阅

订阅专栏

1)概念

每个 Vue 实例在被创建时都要经过一系列的初始化过程，即生命周期阶段。

如 : 创建vue实例----》渲染实例—》更新vue实例----》销毁vue实例

然后在这个过程中会运行一些叫做生命周期钩子的函数，
这给了用户在不同阶段添加自己的代码的机会。

2)生命周期钩子函数

1.准备创建实例 beforeCreate
2.创建实例
3.创建实例完成 created
4.准备渲染实例 beforeMount
5.渲染实例
6.渲染实例完成 mounted
7.准备更新实例 beforeUpdate
8.更新实例
9.更新实例完成 updated
10.准备销毁实例 beforeDestroy
11.销毁实例
12.销毁实例完成 destroyed

备注：
销毁实例方法：实例名.$destroy()。
一个实例被销毁后，会清理它与其它实例的连接，解绑它的全部指令及事件监听属性。

3)基本演示

比如在创建实例之前有个准备阶段：这里就会运行一个生命周期钩子函数

beforeCreate

这个钩子函数会在vue实例创建前执行，我们可以把实例创建前的一些初始化操作写在这个函数里面。
在这里插入图片描述
备注：从上我们可以知道，对于生命周期的钩子函数，我们应该写在vue实例的最外层，和data同级。

4)完整演示

直接把此代码放入浏览器里面运行一遍查看效果

<!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>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
#app * {
border: 1px solid red;
margin: 10px;
}
</style>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
let vueApp = new Vue({
el: "#app",
data: {
message: 'Vue的生命周期'
},
beforeCreate: function () {
var mes = `
beforeCreate ：vue实例创建前的准备阶段:【
el: ${this.$el},
data: ${this.$data},
message: ${this.message},】
`
alert(mes); console.info(mes);
}, created: function () {
var mes = `
created ：vue实例创建完成后的阶段:【
el: ${this.$el},
data: ${this.$data},
message: ${this.message},】
` ; alert(mes); console.info(mes);
}, beforeMount: function () {
var mes = `
beforeMount ：vue实例渲染前的准备阶段:【
el: ${this.$el},
data: ${this.$data},
message: ${this.message},】
` ;
alert(mes); console.info(mes);
}, mounted: function () {
var mes = `
mounted ：vue实例渲染完成后的阶段:【
el: ${this.$el},
data: ${this.$data},
message: ${this.message},】
` ; alert(mes); console.info(mes);
}, beforeUpdate: function () {
var mes = `
beforeUpdate ：vue实例更新前的准备阶段:【
el: ${this.$el},
data: ${this.$data},
message: ${this.message},】
` ; alert(mes); console.info(mes);
}, updated: function () {
var mes = `
updated ：vue实例更新完成的阶段:【
el: ${this.$el},
data: ${this.$data},
message: ${this.message},】
` ; alert(mes); console.info(mes);
}, beforeDestroy: function () {
var mes = `
beforeDestroy ：vue实例销毁前的准备阶段:【
el: ${this.$el},
data: ${this.$data},
message: ${this.message},】
` ; alert(mes); console.info(mes);
}, destroyed: function () {
var mes = `
destroyed ：vue实例销毁完成的阶段:【
el: ${this.$el},
data: ${this.$data},
message: ${this.message},】
` ; alert(mes); console.info(mes);
}
});
</script>
</body>
</html>

5)各钩子函数的说明

1.实例如下对象

let vueApp = new Vue({
el: "#app",
data: {
message: 'Vue的生命周期'
}
});

在此应用运行起来了的过程中，其各个阶段如下

.beforeCreate
这是在vue实例创建之前的钩子函数，在这个阶段，由于vue实例还未创建，所以实例里面的东西是undefined。
created
这是在vue实例创建完成后的钩子函数，在这个阶段，由于vue实例已经创建，所以实例里面的data,message都初始化成功了，不再是undefined.但是还没有去绑定dom节点，所以el属性为undefined。
beforeMount
这是在vue实例创建后,渲染前的钩子函数，在这个阶段，由于vue实例即将要渲染，
所以el属性为已经被赋值成了节点对象。不再是undefined，但是还没有渲染进网页
mounted
这是在vue实例渲染完成后的钩子函数，在这个阶段，网页已经渲染完成

提示
beforeCreate , reated , beforeMount , mounted 这几个生命周期钩子函数从运行网页到渲染完成这个过程会执行，不需要我们显式的去触发。
但是对于下面的几个钩子函数就需要显式的行为来触发，才能执行了。
beforeUpdate , updated , beforeDestroy , destroy.