Vue生命周期函数学习笔记

最新推荐文章于 2024-04-20 06:58:48 发布

奋斗の小胖子

最新推荐文章于 2024-04-20 06:58:48 发布

阅读量114

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_44832412/article/details/113654954

版权

Vue生命周期：一个组件从创建、运行到销毁所经历的过程。
在这里插入图片描述

加载期的生命周期函数（只执行一次）：
beforeCreate()
created()
beforeMount()
mounted()
更新期的生命周期函数（执行零次或多次）：
beforeUpdate()
updated()
销毁期的生命周期函数：
beforeDestroy()
destroyed()
调用methods和操作data中的数据最早在created()
操作DOM最早在mounted()
代码示例：

<!DOCTYPE html>
<html>
   <head>
   	<meta charset="utf-8">
   	<title>生命周期</title>
   	<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
   </head>
   <body>
   	<div id="app">
   		<div id="msg">
   			{{msg}}
   		</div>
   		<button type="button" @click="msg = '我被修改了'">修改</button>
   	</div>
   	<script type="text/javascript">
   		new Vue({
   			el:'#app',
   			data: {
   				msg:'hello'
   			},
   			methods:{
   				test(){
   					console.log('**methods中的函数**')
   				}
   			},
   			beforeCreate() {
   				console.log('---------beforeCreate---------')
   				console.log('data:' + this.$data)
   				console.log('methods:' + this.test)
   			},
   			created(){
   				console.log('---------created---------')
   				console.log('data:' + this.$data)
   				console.log('methods:' + this.test)
   			},
   			beforeMount(){
   				console.log('---------beforeMount---------')
   				console.log('dom:'+document.getElementById('msg').innerText)
   			},
   			mounted(){
   				console.log('---------Mounted---------')
   				console.log('dom:'+document.getElementById('msg').innerText)
   			},
   			beforeUpdate(){
   				console.log('---------beforeUpdate---------')
   				console.log('msg:' + this.msg)
   				console.log('dom:'+document.getElementById('msg').innerText)
   			},
   			updated(){
   				console.log('---------beforeUpdate---------')
   				console.log('msg:' +this.msg)
   				console.log('dom:'+document.getElementById('msg').innerText)
   			}
   		})
   	</script>
   </body>
</html>