Vuejs之路之--对实例生命周期的理解

用Vue框架，熟悉它的生命周期可以让开发更好的进行。

首先先看看官网的图，详细的给出了vue的生命周期:

它可以总共分为8个阶段：

beforeCreate（创建前）,

created（创建后）,

beforeMount(载入前),

mounted（载入后）,

beforeUpdate（更新前）,

updated（更新后）,

beforeDestroy（销毁前）,

destroyed（销毁后）

然后用一个实例的demo 来演示一下具体的效果：

<div id=app>{{a}}</div>

<script>

var myVue = new Vue({          

el: "#app",          

data: {

a: "Vue.js"        

},         

 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>

运行后，查看控制台，

得到这个：

然后再methods 里面添加一个change方法：

<div id=app>{{a}}
<button v-on:click="change">change</button>
</div>

点击按钮之后出现的是：

具体代码如下还有个人的理解：

var vm =  new Vue({el:"#container",data:{folder:"Vuejs的生命周期究竟是什么样子？我真的很想知道！"},methods:{changeData:function(){this.folder = "马上就知道了",this.$el = document.getElementById("dede")}},beforeCreate:function(){console.log("创建前")console.log(this)/*返回的就是一个实例对象，为什么呢，因为根据官网生命周期图示，此时已经完成了Vue实例的初始化工作，this指向的是实例对象本身，所以一定会返回值*/console.log(this.folder)/*undefined，这个为啥呢？同样的也是根据官网所给出的生命周期图示， 此时还不没监控data属性，所以就更别提里面的值了*/},created:function(){console.log("创建后");console.log(this.folder);/*"Vuejs的生命周期究竟是什么样子？我真的很想知道！",因为根据官网生命周期的图示，创建完成势力后，此时已经监控到data属性变化了，当然也就返回真值啦*/console.log(this.$el)/*undefined，还是同上，在这个阶段，势力还没检测到有没有el属性，所以也就无法识别$el了*/},beforeMount:function(){console.log("mount(挂载)之前");console.log(this.folder);/*返回预设值，理由同上*/console.log(this.$el)/*挂在开始之前被调用，（顾名思义还没挂在上嘛，当然不知道根元素在哪里，也就也就没法渲染和转译啦）返回真的实例所挂载的dom对象，还是同上，因为在这个阶段之前，已经检测到了有el属性所以也就理所当然的返回真值啦。但此时返回的还是纯生的DOM对象，{{folder}}并没有被转义，这就更加说明了实例还没挂载上呢*/},mounted:function(){console.log("挂载之后");console.log(this.folder);/*返回预设值，理由同上*/console.log(this.$el)/*挂载之后，才回调用，既然已经挂载上了，那也就知道根元素在哪里了，当然也就能返回正确的值啊*/},beforeUpdate:function(){console.log("更新之前");console.log(this.folder);/*数据更新时调用，也就是说这个回到函数的触发是在数据更新的时候运行的，在这里就是点击事件发生的时候，因为点击的时候改变了数据的值，但是*/console.log(this.$el)/*返回的是新的DOM对象，更新过后的*/},updated:function(){console.log("更新之后");console.log(this.folder);console.log(this.$el)/*数据更新后调用，由于数据更改导致的虚拟 DOM 重新渲染和打补丁，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之*/},beforeDestroy:function(){console.log("销毁之前");/*实例销毁之前调用。在这一步，实例仍然完全可用，怎么让实例销毁呢？*/console.log(this.folder);console.log(this.$el)},destroyed:function(){console.log("销毁之后");/*Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。*/console.log(this.folder);console.log(this.$el)}})

这就是vue的生命周期，很简单吧。