Vue的生命周期
Vue的生命周期，就是从Vue实例被创建开始到实例销毁时的过程，整个过程主要可以分为八个阶段分别是：创建前（beforeCreate）、已创建（created）、编译前（beforeMount）、编译后（mounted）、更新前（beforeUpdate）、更新后（update）、销毁前（beforeDestroy）、销毁后（destroyed）,以上各个阶分别会有对应的“钩子函数”以Vue实例的
·
Vue的生命周期，就是从Vue实例被创建开始到实例销毁时的过程，整个过程主要可以分为八个阶段分别是：创建前（beforeCreate）、已创建（created）、编译前（beforeMount）、编译后（mounted）、更新前（beforeUpdate）、更新后（update）、销毁前（beforeDestroy）、销毁后（destroyed）,以上各个阶分别会有对应的“钩子函数”以Vue实例的选项的形式存在。以下是各个阶段的含义以及相应的钩子函数实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Vue的生命周期</title>
<link rel="stylesheet" href="">
<style type="text/css" media="screen">
[v-cloak]{
display: none
}
</style>
</head>
<body>
<div id="container" v-cloak>
<h3>{{greeting}}</h3>
<button @click="updateFunc">更新实例</button>
<button @click="destroy">销毁实例</button>
</div>
<script type="text/javascript" src="../dist/vue.min.js"></script>
<script type="text/javascript">
/**
* Vue实生命周期中的钩子函数，是作为实例的选项存在的
*/
var app = new Vue({
el:"#container",
data:{
greeting:"hello,world!"
},
methods:{
// 数据更新，会触发beforeUpdate以及update钩子函数
updateFunc:function(){
this.greeting = "嗨，大家好！"
},
// 销毁实例，会触发beforeDestroy和destroyed钩子函数
destroy:function(){
this.$destroy()//实例.$destroy()，用来销毁实例，释放内存空间
}
},
beforeCreate:function(){
alert("此时Vue实例被创建，但是却没有开始观测(并监视)数据和初始化事件，也就是说此时只是有一个Vue实例的空壳子")
},
created:function(){//常用，可以用来进行数据的初始化
alert("此时Vue实例已经被创建，而且完成了数据的观测和事件的初始化")
},
beforeMount:function(){
alert("模板编译之前，此时还没有将数据挂载到元素上")
},
mounted:function(){//常用，
alert("模板已经完成了编译和已经挂载，此时才开始渲染界面，并显示到页面上")
},
beforeUpdate:function(){
alert("实例更新之前,在这里所谓的更新，实例上任意一部分更新均会触发此函数，在这里是更新了数据")
},
updated:function(){
alert("实例更新之后")
},
beforeDestroy:function(){
alert("实例销毁之前,所谓的销毁就是该实例所拥有的内存空间被释放和销毁")
},
destroyed:function(){
alert("实例销毁之后")
}
})
</script>
</body>
</html>
前往低代码交流专区
更多推荐
3
0- 0
已为社区贡献8条内容
所有评论(0)