Vue实例的生命周期和钩子函数

最新推荐文章于 2024-08-19 21:49:22 发布

瑞的菜鸟编程之路

最新推荐文章于 2024-08-19 21:49:22 发布

阅读量243

点赞数

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

本文链接：https://blog.csdn.net/m0_63926154/article/details/126809606

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue实例

每个使用vue进行数据渲染的网页文档都需要创建⼀个Vue实例 —— ViewModel

4.1 Vue实例的生命周期

vue实例⽣命周期——vue实例从创建到销毁的过程

创建vue实例（初始化data、加载el）
数据挂载（将vue实例data中的数据渲染到⽹⻚HTML标签）
重新渲染（当vue的data数据发⽣变化，会重新渲染到HTML标签）
销毁实例

4.2 钩子函数

为了便于开发者在vue实例⽣命周期的不同阶段进⾏特定的操作，vue在⽣命周期四个阶
段的前后分别提供了⼀个函数，这个函数⽆需开发者调⽤，当vue实例到达⽣命周期的指
定阶段会⾃动调⽤对应的函数。

在这里插入图片描述

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="js/vue.js" ></script>
 </head>
 <body>
	 <div id="container">
	  	 <!--v-once表示数据只会被渲染一次后续渲染没有效果-->
		 <label v-once>{{str}}</label><br/>
		 <label>{{str}}</label><br/>
		 <input type="text" v-model="str"/>
	 </div>
 
 	<script type="text/javascript">
		 var vm = new Vue({
			 el:"#container",
			 data:{
			 	str:"从前后座山"
			 },
			 beforeCreate:function(){
			 //1.data初始化之前执⾏，不能操作data
			 },
			 created:function(){
			 //2.data初始化之后执⾏，模板加载之前，可以修改/获取data中的值
			 //console.log(this.str);
			 //this.str = "山里有座庙";
			 },
			 beforeMount:function(){
			 //3.模板加载之后，数据初始渲染（挂载）之前，可以修改/获取data中的值
			 //this.str = "庙⾥有⼝井";
			 },
			 mounted:function(){
			 //4.数据初始渲染（挂载）之后，可以对data中的变量进⾏修改，但是v-once的渲染不会影响
			 //this.str = "井⾥有只蛙";
			 },
			 beforeUpdate:function(){
			 //5.数据渲染之后，当data中的数据发生变化触发重新渲染，渲染之前执行此函数
			 // data数据被修改之后，重新渲染到页面之前
			 console.log("-----"+this.str);
			 //this.str = "从前有座山2";
			 },
			 updated:function(){
			 //6.data数据被修改之后，重新渲染到页面之后
			 //这个函数和beforeUpdate不会一起使用，因为会造成死循环
			 //this.str = "从前有座⼭3";
			 },
			 beforeDestroy:function(){
			 //7.实例销毁之前
			 },
			 destroyed:function(){
			 //8.实例销毁之后
			 }
		 
		 });
 
 </script> 
 </body>
</html>