Vue(十)生命周期

时间:2022-10-28 21:13:52
Vue生命周期
vue实例从创建到销毁的过程,称为生命周期,共有八个阶段
  <script>
    window.onload=function(){
let vm = new Vue({
el:'#app',
data:{
msg:'Hello World ! '
},
methods:{
update(){
this.msg='Hello Kitty!';
},
destroy(){
// this.$destroy();
vm.$destroy();
}
},
beforeCreate(){
alert('组件实例刚刚创建,还未进行数据观测和事件配置');
},
created(){ //常用!!!
alert('实例已经创建完成,并且已经进行数据观测和事件配置');
},
beforeMount(){
alert('模板编译之前,还没挂载');
},
mounted(){ //常用!!!
alert('模板编译之后,已经挂载,此时才会渲染页面,才能看到页面上数据的展示');
},
beforeUpdate(){
alert('组件更新之前');
},
updated(){
alert('组件更新之后');
},
beforeDestroy(){
alert('组件销毁之前');
},
destroyed(){
alert('组件销毁之后');
}
})
} </script> <body> <div id="app"> {{msg}} <br> <button @click="update">更新数据</button>
<button @click="destroy">销毁组件</button> </div> </body>