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

生命周期钩子

每个 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'))//
随便写一段文字----
		},
		// 运行阶段生命钩子：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实例

使用箭头函数：

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

箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例,在这里指向window；到时候，我们调用methods方法和data数据就会报错
3. 生命周期函数图示
图片所在文档

这里表示Vue开始编辑模板，把Vue代码中的指令进行执行，最终，在内存中渲染好了一个模板字符串，并没有渲染到页面中去
4. 在往下看
这一步，将编译好的模板，真实替代到浏览器中去
5. 数据更新阶段

data数据更新，根据data数据是最新的重新渲染一根虚拟dom，dom树被更新后，就会渲染到真实的页面中去。