Vue——生命周期

最新推荐文章于 2024-05-14 08:45:55 发布

鹿蹊zz

最新推荐文章于 2024-05-14 08:45:55 发布

阅读量1.2k

点赞数 3

分类专栏： Vue前端框架整理文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_46461853/article/details/126273953

版权

一、生命周期图

二、再探究

2.1 beforeCreate之前

2.2 beforeCreate和created钩子函数间的生命周期

2.3 created钩子函数和beforeMount间的生命周期

2.3.1 el选项对生命周期影响

2.3.2 template

2.4 beforeMount和mounted钩子函数间的生命周期

2.5 beforeUpdate钩子函数和updated钩子函数间的生命周期

2.6 beforeDestroy和destroyed钩子函数间的生命周期

一、生命周期图

Vue实例的生命周期中有多个状态。

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
</head>
<body>
	<div id="root">
    
	</div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
  var vm = new Vue({
  	el : '#root',
	data(){
		return{
			msg:"111"
		}
		
	},
	template:'<div>{
  {msg}}</div>',
	beforeCreate:function(){
		console.log('beforeCreate');
	}, 
	created:function(){
		console.log('created');
	}, 
	beforeMount:function(){
		console.log(this.$el);
		console.log('beforeMount');
	},
	mounted:function(){
		console.log(this.$el);
		console.log('Mount');
	},
	
	beforeUpdate(){
		console.log("调用了beforeUpdate钩子函数");
	},
	updated(){
		console.log("调用了Update钩子函数");
	},
	beforeDestroy(){
		      console.log("调用了beforeDestroy钩子函数");
		    },
	destroyed(){
		      console.log("调用了destroyed钩子函数");
		    },
  })

</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue实例的生命周期</title>
</head>
<body>
<div id="app">
  <h1>测试生命周期</h1>
  <div>{
  {msg}}</div>
  <hr>
  <h3>测试beforeUpdate和update两个钩子函数</h3>
  <button @click="handlerUpdate">更新数据</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      msg: "12345"
    },
    methods: {
      handlerUpdate() {
        this.msg=this.msg.split("").reverse().join("")
      }
    },
    //按照示意图依次调用
    beforeCreate(){
      console.log("调用了beforeCreate钩子函数");
    },
    created(){
      console.log("调用了created钩子函数");
    },
    beforeMount(){
      console.log('调用了beforeMount钩子函数');
    },
    mounted(){
      console.log('调用了mounted钩子函数');
    },
    beforeUpdate(){
      console.log("调用了beforeUpdate钩子函数")
    },
    updated(){
      console.log("调用了updated钩子函数");
    },
    beforeDestroy(){
      console.log("调用了beforeDestroy钩子函数");
    },
    destroyed(){
      console.log("调用了destroyed钩子函数");
    }
  })
</script>
</body>
</html>

如图所示：