<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>生命周期</title>
</head>
<body>
<div class="app">
{{a}}
<input type="text" v-model="a" name="" value="a">
</div>
</body>
<script src="js/vue.js" charset="utf-8"></script>
<script type="text/javascript">
//Vue的生命周期
//它可以总共分为8个阶段:
//beforeCreate(创建前),
//created(创建后),
//beforeMount(载入前),
//mounted(载入后),
//beforeUpdate(更新前),
//updated(更新后),
//beforeDestroy(销毁前),
//destroyed(销毁后)
//然后用一个实例的demo 来演示一下具体的效果:
//created:异步数据的获取、初始化
//mounted:挂载元素内dom节点的获取
//nextTick:更新数据后立即操作dom
//updated:任何数据的更新,如果要做统一的业务逻辑处理
//watch:监听具体数据变化,并做相应的处理
var vm=new Vue({
el:'.app',
data:{
a:'vue值'
},
beforeCreate:function(){
console.group('beforeCreate创建前状态===============》');
console.log("a:"+this.a); //a:undefined
console.log(this.$el) //undefined
},
created:function(){
console.group('created创建后状态===============》');
console.log("a:"+this.a); //a:vue值
console.log(this.$el) //undefined
},
beforeMount:function(){//钩子函数间的生命周期
console.group('beforeMount挂载前状态===============》');
console.log("a:"+this.a); //a:vue值
console.log(this.$el) //<div class="app">{{a}} <input type="text" v-model="a" name="" value="a"></div>
},
mounted:function(){//钩子函数间的生命周期
console.group('mounted挂载结束状态===============》');
console.log("a:"+this.a);//a:vue值
console.log(this.$el) //<div class="app"> vue值 <input type="text" value="a"></div>
},
beforeUpdate:function(){//钩子函数间的生命周期
console.group('beforeUpdate更新前状态===============》');
console.log("a:"+this.a);//a:vue值2
console.log(this.$el) //<div class="app"> vue值2 <input type="text" value="a"></div>
},
updated:function(){//钩子函数间的生命周期
console.group('updated更新后状态===============》');
console.log("a:"+this.a); //a:vue值2
console.log(this.$el) //<div class="app"> vue值2 <input type="text" value="a"></div>
},
beforeDestroy:function(){//钩子函数在实例销毁之前调用。在这一步,实例仍然完全可用。
console.group('beforeDestroy销毁前状态===============》');
console.log("a:"+this.a);
console.log(this.$el)
},
destroyed:function(){//钩子函数在Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,
//所有的事件监听器会被移除,所有的子实例也会被销毁。
console.group('destroyed销毁后状态===============》');
console.log("a:"+this.a);
console.log(this.$el)
}
});
</script>
</html>
vue的生命周期
最新推荐文章于 2021-12-14 15:20:11 发布