vue的生命周期小结

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <div id="app">{{a}}
        <button v-on:click="change">change</button>
    </div>

</body>
</html>

<script>
var myVue = new Vue({          
el: "#app",          
data: {
a: "Vue.js"        
}, 
methods:{
    change(){
        console.log('change Vue')
    }
} ,        
 beforeCreate: function() {     
    console.log("创建前")            
    console.log(this.a)            
    console.log(this.$el)          
},         
 created: function() {
    console.log("创建之后");            
    console.log(this.a)            
    console.log(this.$el)          
},         
 beforeMount: function() {            
    console.log("mount之前")            
    console.log(this.a)            
    console.log(this.$el)          
},          
mounted: function() {            
    console.log("mount之后")            
    console.log(this.a)            
    console.log(this.$el)          
},          
beforeUpdate: function() {            
    console.log("更新前");            
    console.log(this.a)            
    console.log(this.$el)          
},          
updated: function() {            
    console.log("更新完成");            
    console.log(this.a);            
    console.log(this.$el)          
},          
beforeDestroy: function() {            
    console.log("销毁前");            
    console.log(this.a)            
    console.log(this.$el)            
    console.log(this.$el)          
},          
destroyed: function() {           
    console.log("已销毁");          
    console.log(this.a)          
    console.log(this.$el)          
},

  });  

</script>

// 关于vue.js生命周期的一些认识：
// this.a this.$el
// beforeCreate：创建前; N N
// created:创建后; Y N
//
// beforeMount:载入前; Y Y(虚拟的，占坑而已)
// mouted:载入后 Y Y(真实的)
//
// beforeUpdate:更新前;
// updated:更新后;
//
// beforeDestory:销毁前;
// destroyed:销毁后；
//
//
/*
beforecreate : 可以在这加个loading事件，在加载实例时触发
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到DOM节点
updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
*/

vue的生命周期小结

推荐阅读更多精彩内容