1.Vue实例(new出来)在被创建之前要经过一系列初始化过程，在这个过程中，实例也会调用一些生命周期钩子。
例如：created这个钩子在实例被创建之后就会自动调用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue生命周期</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
{{msg}}
</div>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'Hello World'
},
created:function(){
alert(this.msg); //'this'指向实例
}
});
</script>
</body>
</html>
2.其它的钩子，在实例生命周期的不同阶段调用，如 mounted、 updated 、destroyed。
<div id="box2">
<input type="text" v-model="msg"><br/>
{{msg}}
</div>
<script type="text/javascript">
new Vue({
el:'#box2',
data:{
msg:'Hello World'
},
created:function(){
console.log('实例已经创建,msg变量还未渲染到模板')
},
mounted:function(){
console.log('已经挂载到模板上:msg变量渲染到模板')
},
updated:function(){
console.log('实例更新啦')
},
destroyed:function(){
console.log('销毁啦')
}
});
</script>
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
