Vue.js之Vue实例的生命周期

本文主要介绍Vue.js中实例创建到销毁的整个生命周期，通过下面这个小案例进行演示。

Vue实例默认会先执行四个函数，分别是创建前、已创建、挂载前和已挂载函数。当点击案例中的第一个按钮时，数据会发生变化，更新前及已更新对应的函数会被执行。当点击案例中的第二个按钮时，Vue实例被销毁，销毁前及已销毁对应的函数会被执行

具体说明:(通过debugger打断点更易理解)

beforeCreate会在实例data等创建前进行调用，此时访问data中的数据，会是undefined。created会在数据创建后执行，可以访问data中的数据，此时数据还未被渲染至页面上。beforeMount在挂载前执行，此时可对data中的数据作最后一次修改。mounted在数据挂载之后执行.当更新数据时，beforeUpdate会先执行，此时更新的数据还未被渲染至页面上。updated在数据更新完成后执行，此时页面已渲染了最新的数据。删除实例时，会先执行beforeDestroyed,此时方法和数据都未删除。destroyed在删除之后执行，此时方法等失效，但数据可以访问。

效果如图：

代码如下：

    
    
    
    



    

        

        
点击更新
        
点击销毁