当前位置：首页 > news >正文

（4）Vue的生命周期详细过程

news 来源：原创 2025/4/21 6:35:00

文章目录

第4章 Vue的生命周期详细过程
- 4.1 Vue的生命周期简介
- 4.2 Vue的生命周期钩子
- - 4.2.1 beforeCreate/created
  - 4.2.2 beforeMount/mounted
  - 4.2.3 beforeUpdate/updated
  - 4.2.4 beforeDestory/destroyed

第4章 Vue的生命周期详细过程

4.1 Vue的生命周期简介

每个 Vue 实例在被创建之前都要经过一系列的初始化过程.

vue在生命周期中共有：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestory、destroyed8个状态；

4.2 Vue的生命周期钩子

4.2.1 beforeCreate/created

beforeCreate：Vue生命周期的第一个函数，在Vue对象创建之前执行，初始化Vue自身的事件、注册Vue示例的生命周期函数等，在该阶段props、data、method都处于不可用状态；
- 1）创建VUE对象之前执行
- 2）data中的数据还未初始化
- 3）el还未关联到对应的id（还未挂载DOM）
- 4）{{}}表达式中的内容还没更新（真实DOM还未渲染）
created：创建VUE对象之后执行，该阶段Vue示例已经被创建成功，初始化了props、data、methods等功能；但是Vue还未挂载dom元素（还未进行绑定）
- 1）创建VUE对象之后执行
- 2）data中的数据已经初始化
- 3）el还未关联到对应的id
- 4）{{}}表达式中的内容还没更新（真实DOM还未渲染）

【示例代码1-观察dom的变化】

<body>
<div id="box">{{message}}
</div><script>new Vue({el: "#box",data: {message: 'Hello World'},// 在beforeCreate阶段的Vue,数据未初始化、dom未挂载、dom也未渲染beforeCreate: function () {console.log('创建vue实例前【beforeCreate】');console.log('data 数据：' + this.message);			// undefinedconsole.log('挂载的对象：' + this.$el);				// undefinedconsole.log('真实dom结构：' + document.getElementById('box').innerHTML);		// {{message}}console.log('------------------');},// 在created阶段的Vue,数据已经初始化、但dom未挂载、dom也未渲染created: function () {console.log('创建vue实例后【created】');console.log('data 数据：' + this.message);				// Hello Worldconsole.log('挂载的对象：' + this.$el);					// undefinedconsole.log('真实dom结构：' + document.getElementById('box').innerHTML);		// {{message}}console.log('------------------');}});
</script></body>

【示例代码2-调用Vue数据】

<body>
<div id="box">{{message}}
</div><script>new Vue({el: "#box",data: {message: 'Hello World'},methods: {method() {console.log("method running...");}},beforeCreate: function () {console.log('创建vue实例前【beforeCreate】');// Vue实例还未创建成功,不能调用this.method();// Vue实例还未创建成功,不能访问数据(undefined)console.log(this.message);console.log('------------------');},created: function () {console.log('创建vue实例后【created】');// Vue实例已经创建成功,可以调用Vue方法this.method();// Vue实例已经创建成功,可以访问数据console.log(this.message);console.log('------------------');}});
</script></body>

4.2.2 beforeMount/mounted

beforeMount：对象挂载之前执行，此时el已经关联到对应对象，但{{}}表达式还未加载（挂载了，但还没完全挂载）
- 1）对象挂载之前执行
- 2）data中的数据已经初始化
- 3）el已经关联到对应对象（挂载了DOM）
- 4）{{}}表达式中的内容还没更新（真实DOM还未渲染）
mounted：对象挂载之后执行,此时{{}}表达已经加载，执行完mounted之后开始正常执行js代码
- 1）对象挂载之后执行
- 2）data中的数据已经初始化
- 3）el已经关联到对应对象
- 4）{{}}表达式中的内容已经更新（真实DOM已经渲染）

【示例代码1-观察dom的变化】

<body>
<div id="box">{{message}}
</div><script>var vm = new Vue({el: "#box",data: {message: 'Hello World'},// 在beforeMount阶段的Vue,数据已经初始化、dom已经挂载、但dom未渲染beforeMount: function () {console.log('挂载到dom前【beforeMount】');console.log('data 数据：' + this.message);			// Hello Worldconsole.log('挂载的对象：' + this.$el);				// [object HTMLDivElement]console.log('真实dom结构：' + document.getElementById('box').innerHTML);		// {{message}}console.log('------------------');},// 在mounted阶段的Vue,数据已经初始化、dom已经挂载、dom也已经渲染mounted: function () {console.log('挂载到dom后【mounted】');console.log('data 数据：' + this.message);			// Hello Worldconsole.log('挂载的对象：' + this.$el);				// [object HTMLDivElement]console.log('真实dom结构：' + document.getElementById('box').innerHTML);		// Hello Worldconsole.log('------------------');}});
</script></body>

4.2.3 beforeUpdate/updated

当修改了Vue中的数据时将会触发beforeUpdate与updated方法。

beforeUpdate：Vue数据更新前执行，此时data中的数据已经更新，但是{{}}表达式中引用的还没有更新（还未渲染到DOM上）。
updated：Vue数据更新后执行，{{}}表达式中引用也更新。

【示例代码-观察数据变更前后的值】

<body>
<div id="box">{{message}}<br><button v-on:click="fun1()">改变数据</button></div><script>var vm = new Vue({el: "#box",data: {message: 'Hello World'},methods: {fun1() {this.message = Math.random();}},// 当修改了Vue中的数据时,beforeUpdate方法中的dom还是为渲染之前的,但Vue中的数据已经修改beforeUpdate: function () {console.log('数据变化更新前【beforeUpdate】');console.log('data 数据：' + this.message);console.log('挂载的对象：' + this.$el);console.log('真实dom结构：' + document.getElementById('box').innerHTML);console.log('------------------');},// 当修改了Vue中的数据时,updated方法中的dom已经更新为最新的数据updated: function () {console.log('数据变化更新后【updated】');console.log('data 数据：' + this.message);console.log('挂载的对象：' + this.$el);console.log('真实dom结构：' + document.getElementById('box').innerHTML);console.log('------------------');}});</script></body>

4.2.4 beforeDestory/destroyed

beforeDestory：vue对象销毁前执行，在该方法中，Vue中注册的组件、侦听器、事件监听等都处于可用状态，一般在此阶段释放其他资源
destroyed：vue对象销毁后执行，在该方法中，已经销毁了Vue中注册的组件、侦听器、事件监听等；

【示例代码-观察Vue实例销毁前后的变化】

<body>
<div id="box">{{message}}<hr><button @click="exit">销毁VM</button></div><script>var vm = new Vue({el: "#box",data: {message: 'Hello World'},methods: {exit(){// 销毁vmthis.$destroy()}},beforeDestroy: function () {console.log('--------beforeDestroy----------');},destroyed: function () {console.log('--------destroyed----------');}});
</script></body>