Vue 的生命周期

最新推荐文章于 2024-05-18 15:56:08 发布

山有木兮794

最新推荐文章于 2024-05-18 15:56:08 发布

阅读量191

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq734776328/article/details/88574856

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近开始接触Vue 所以把自己对于Vue的一些理解记录在这

先来一张Vue的生命周期:

在这里插入图片描述
Vue的生命周期中有8个方法:
beforCreate(): new Vue()实例被创建之前调用该方法 vue实例中的 data methods filters 等属性还没创建
created(): new Vue()实例创建之后调用该方法 vue实例中的 data methods filters 等属性已创建完成
beforMount(): 此函数执行的时候模板已经在内存中编译好了，但是尚未挂载到页面中
mount(): 当把生成好的模板从内存中挂载到页面中后此方法被执行
beforUpdate(): 把生成好的模板从内存中挂载到页面但页面数据还没用更新之前会调用此方法
update(): 页面更新之后调用此方法
beforDestroy(): 页面销毁前执行此方法
destroyed(): 页面销毁后执行此方法

下面通过事例在加深 Vue 生命周期的了解

<!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="./lib/vue-2.4.0.js"></script>
</head>
</head>
<body>
	<div id="app">
		{{ msg }}
		<input type="button" value="点击我改变数据" @click="changer">
	</div>
<script>
//创建Vue实例
	new Vue({
		el:'#app',
		data: {
			msg: '我是原來的值'
		},
		methods:{
			say: function (data) {
				this.msg = '我被'+data+'修改了'
			},
			changer: function () {
				this.msg = '我被改变了'
			}
		},
		//Vue生命周期函数与Vue实例里面的 el data mothods等属性同级
		beforeCreate(){
			// this.say()// 会报错 应为不存在 say 方法
			console.log(this.msg) // 输出 undefind 因为此时Vue实例还没创建 data 无数据 
		},
		created(){
			console.log('====create()===华丽的分割线=======')
			this.say('created') // msg 被修改 到此时 Vue实例已经被创建了 所以此时调用可以调用 say() 
		},
		beforeMount(){
			console.log('====beforeMount()===华丽的分割线=======')
			//执行次函数时 DOM树模板已经在内存中编译好了 只是还没用加载到页面中
			this.say('beforeMount')
			console.log(document.getElementById('app').innerText)//输出 {{ msg }} 因为此时还没有将内存中的DOM树加载到页面中 所以此时获取的内容并非 Vue 实例中的内容
		},
		mounted(){
			console.log('====mounted()===华丽的分割线=======')

			//执行到此函数时 已经把内存中的DOM树加载到了页面中 代表此时Vue实例的创建阶段已经结束 进入到了运行阶段
			console.log(document.getElementById('app').innerText);
		},
		beforeUpdate(){
			console.log('====beforeUpdate()===华丽的分割线=======')
			//此方法在数据更新之前被执行 所以 Vue实例上的数据还没更新到页面中
			console.log('页面上的 msg 数据:'+document.getElementById('app').innerText)//页面上的数据仍然是 我被beforeMount 改变了
			console.log('Vue实例上的 msg 数据:'+this.msg) //Vue中的 数据是 我被改变了

		},
		updated(){
			console.log('====update()===华丽的分割线=======')
			//此方法说明 Vue实例的数据已经更新到页面上了
			console.log('页面上的 msg 数据:'+document.getElementById('app').innerText)//页面上的数据仍然是 我被改变了
			console.log('Vue实例上的 msg 数据:'+this.msg) //Vue中的 数据是 我被改变了
		}

	})
</script>
</body>
</html>