【Vue 学习】- VueJS 生命周期

向右看齐 2021-09-21 01:16 454阅读 0赞

## 一、概述 ##

Vue 的生命周期可以分为 8 个生命周期的执行点，从 new 创建 Vue 对象到对象的销毁，其中 4 个基本的，4 个特殊的，在下图中，红色标注的就是 8 个生命周期的执行点，前四个为基本的，后四个为特殊的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9MX1N0YXI_size_16_color_FFFFFF_t_70][]

四个基本执行点（数据加载）：

*  beforeCreadted：
    
     *  实例组件刚创建，元素DOM和数据都还没有初始化，loading事件
 *  created：
    
     *  数据data已经初始化完成，方法也已经可以调用，但是DOM为渲染。在这个周期里面如果进行请求是可以改变数据并渲染，由于DOM未挂载，请求过多或者占用时间过长会导致页面线上空白。
 *  beforeMount：
    
     *  DOM未完成挂载，数据也初始化完成，但是数据的双向绑定还是显示\{ \{\}\}，这是因为Vue采用了Virtual DOM（虚拟Dom）技术。先占住了一个坑。
 *  mounted：
    
     *  数据和DOM都完成挂载，在上一个周期占位的数据把值给渲染进去。一般请求会放在这个地方，因为这边请求改变数据之后刚好能渲染。

四个特殊执行点（数据更新）：

*  beforeUpdate：
    
     *  只要是页面数据改变了都会触发，数据更新之前，页面数据还是原来的数据，当你请求赋值一个数据的时候会执行这个周期，如果没有数据改变不执行。
 *  updated：
    
     *  只要是页面数据改变了都会触发，数据更新完毕，页面的数据是更新完成的。beforeUpdate和updated要谨慎使用，因为页面更新数据的时候都会触发，在这里操作数据很影响性能和容易死循环。
 *  beforeDestroy：
    
     *  这个周期是在组件销毁之前执行，在我项目开发中，觉得这个其实有点类似路由钩子beforeRouterLeave,都是在路由离开的时候执行，只不过beforeDestroy无法阻止路由跳转，但是可以做一些路由离开的时候操作，因为这个周期里面还可以使用data和method。比如一个倒计时组件，如果在路由跳转的时候没有清除，这个定时器还是在的，这时候就可以在这个里面清除计时器。
 *  destroyed：
    
     *  组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在    组件销毁时进行提示

## 二、代码实例 ##

在代码编写中，每一个执行过程都有对应的函数事件

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="utf-8" />
    		<title>vuejs生命周期</title>
    		<script src="js/vuejs-2.5.16.js"></script>
    	</head>
    
    	<body>
    		<div id="app">
    			{
       {message}}
    		</div>
    	</body>
    	<script>
    		var vm = new Vue({
    			el: "#app",
    			data: {
    				message: 'hello world'
    			},
    			beforeCreate: function() {
    				console.log(this);
    				showData('创建vue实例前：beforeCreate', this);
    			},
    			created: function() {
    				showData('创建vue实例后：created', this);
    			},
    			beforeMount: function() {
    				showData('挂载到dom前：beforeMount', this);
    			},
    			mounted: function() {
    				showData('挂载到dom后：mounted', this);
    			},
    			beforeUpdate: function() {
    				showData('数据变化更新前：beforeUpdate', this);
    			},
    			updated: function() {
    				showData('数据变化更新后：updated', this);
    			},
    			beforeDestroy: function() {
    				vm.test = "3333";
    				showData('vue实例销毁前：beforeDestroy', this);
    			},
    			destroyed: function() {
    				showData('vue实例销毁后：destroyed', this);
    			}
    		});
    
    		function realDom() {
    			console.log('真实dom结构：' + document.getElementById('app').innerHTML);
    		}
    
    		function showData(process, obj) {
    			console.log(process);
    			console.log('data 数据：' + obj.message)
    			console.log('挂载的对象：')
    			console.log(obj.$el)
    			realDom();
    			console.log('------------------')
    			console.log('------------------')
    		}
    		//vm.message = "good...";
    		vm.$destroy(); 
    	</script>
    
    </html>

运行后按 F12，点 Console，可以看到加载时数据的变化

![20191227135710448.png][]

当修改数据后，比如将上面代码注释打开，改变 message 的值，运行后按 F12，点 Console，可以看到加载时数据的变化：

![20191227141939445.png][]

--------------------

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9MX1N0YXI_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9MX1N0YXI_size_16_color_FFFFFF_t_70]: /images/20210920/5e6f39023b4d4704b77cbc5d4d0a57a7.png
[20191227135710448.png]: /images/20210920/ec821316f1f94df19788f48039b26325.png
[20191227141939445.png]: /images/20210920/70fd455171a647b79dce8bdbcff596a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9MX1N0YXI_size_16_color_FFFFFF_t_70 1]: /images/20210920/c5101f6e66ab4abb9c21e023b21d7a2a.png