Vue生命周期函数的简单理解

以你之姓@ 2022-03-17 02:20 253阅读 0赞

### 生命周期钩子 ###

> 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

### 代码解释生命周期函数 ###

<template>
    	<div>
    		<h1>生命周期函数</h1>
    		<div id="box">{ { msg}}</div>
    		<button @click="msg='更改了msg的数据'">改变</button>
    	</div>
    </template>
    <script>
    	export default{ 
    		data(){ 
    			return { 
    				msg: '随便写一段文字----',
    				destroy:'看看是否销毁'
    			}
    		},
    		methods:{ 
    			show(){ 
    				console.log('初始化了')
    			}
    		},
    		beforeCreate(){ 
    			// 表示实例被完全创建出来之前，会执行它
    			// data和methods都还没初始化
    			console.log(this.msg)//undefind
    		},
    		created(){ 
    			// data和methods都初始化了
    			// 如果想要使用data和methods、最早只能在create
    			console.log(this.msg)//随便写一段文字----
    		},
    		beforeMount(){ 
    			// 表示模板已经在内存中编辑完成了，但尚未渲染到页面上
    			console.log(document.querySelector('h1'))//null
    			// 此时拿到的只是模板字符串
    		},
    		mounted(){ 
    			// 模板已经挂载到页面中，用户可以看到已经渲染好的页面
    			// 如果要操作dom节点，最早只能在mounted上进行
    			// 只要执行完了mounted：就表示整个vue实例创建完成
    			// 此时，从创建阶段进行到了运行阶段
    			console.log(document.querySelector('#box'))//<div id="box">随便写一段文字----</div>
    		},
    		// 运行阶段生命钩子：beforeUpdate()和updated()
    		// 点击按钮更新data数据
    		beforeUpdate(){ 
    			// 此时数据更新了，页面上的数据还是旧的，data的数据是新的,页面尚未和数据保持同步
    			console.log('data:'+this.msg)//data:更改了msg的数据
    			let oldData = document.querySelector('#box').innerText
    			console.log('界面：'+oldData)//界面:随便写一段文字----
    		},
    		// 中间这一步执行的是，先根据data最新的数据,在内存中渲染最新的dom树
    		// 当最新的dom树被更新后，会把最新的内存dom树重新渲染到页面中去，完成从m到v的更新
    		updated(){ 
    			// 页面上和data数据保持同步了，都是最新的
    			console.log(document.querySelector('#box').innerText)//随便写一段文字----
    			console.log(this.msg)//随便写一段文字----
    		},
    		beforeDestroy(){ 
    			// Vue实例已经从运行阶段到销毁阶段
    			// 实例身上data和methods，过滤器，指令处于可用状态，还没真正销毁
    		},
    		destroyed(){ 
    			// 组件已经被完全销毁了
    		}
    	};
    	/* 1. 数据被创建 2. 数据模板渲染(创建) 3. 数据更新(运行) 4. 数据销毁 */
    </script>
    <style>
    	
    </style>

### 知识点 ###

1.  运行阶段  
    运行阶段只有两个生命周期函数：beforeUpdate、updated;这两个会根据data数据(model)的变化,有选择性的触发0次到多次
2.  不要在选项属性或回调上使用箭头函数

created(){ 
    			console.log(this)
    			
    		},

created:function(){ 
    			console.log(this)
    		}

这两个打印的结果如下图，生命周期钩子this上下文指向它的Vue实例  
![打印部分结果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]  
使用箭头函数：

created:()=>{ 
    			console.log(this)
    		}

箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例,在这里指向window；到时候，我们调用methods方法和data数据就会报错  
3. 生命周期函数图示  
[图片所在文档][Link 1]  
![部分][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 1]  
这里表示Vue开始编辑模板，把Vue代码中的指令进行执行，最终，在内存中渲染好了一个模板字符串，并没有渲染到页面中去  
4. 在往下看  
![部分截图][20190222074651684.png]这一步，将编译好的模板，真实替代到浏览器中去  
5. 数据更新阶段  
![虚拟dom][dom]  
data数据更新，根据data数据是最新的重新渲染一根虚拟dom，dom树被更新后，就会渲染到真实的页面中去。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]: /images/20220317/d8e24933b4604de1acb9684a47739f24.png
[Link 1]: https://cn.vuejs.org/v2/guide/instance.html#%E5%AE%9E%E4%BE%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 1]: /images/20220317/1f4f238ddfae4b52ad5d24c8dc16ca5d.png
[20190222074651684.png]: /images/20220317/f7fcf387f93a474fb2afcf2b5f6e5c6c.png
[dom]: /images/20220317/d625b3a3cc00409fbbcb4186ab01b981.png