实例生命周期
Vue实例(new出来)在被创建之前要经过一系列初始化过程,在这个过程中,实例也会调用一些生命周期钩子
。 例如:created
这个钩子在实例被创建之后就会自动调用:
<!DOCTYPE html>
<html >
<head >
<title > </title >
<meta charset ="utf-8" >
<script src ="http://unpkg.com/vue/dist/vue.js" > </script >
</head >
<body >
<div id ="box" >
{{msg }}
</div >
<script type ="text/javascript" >
new Vue({
el:'#box' ,
data:{
msg:'welcome'
},
created:function () {
alert(this .msg);
}
});
</script >
</body >
</html >
也有一些其它的钩子,在实例生命周期的不同阶段调用,如 mounted
、 updated
、destroyed
。
<div id ="box" >
<input type ="text" v-model ="msg" > <br />
{{msg }}
</div >
<script type ="text/javascript" >
new Vue({
el:'#box' ,
data:{
msg:'welcome'
},
created:function () {
console.log('实例已经创建,msg变量还未渲染到模板' )
},
mounted:function () {
console.log('已经挂载到模板上:msg变量渲染到模板' )
},
updated:function () {
console.log('实例更新啦' )
},
destroyed:function () {
console.log('销毁啦' )
}
});
</script >