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>