官方给出的设计图入戏
为了能更好的理解这个图呢,写了下面的demo
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="vue.js" type="text/javascript" charset="utf-8"></script><title>vue生命周期</title></head><body><div id="me">{{msg}}</div></body><script type="text/javascript">var vm = new Vue({el:"#me",data:{msg:"学习vue呢"},//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。beforeCreate:function(){console.log('beforeCreate');},/* 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。 */created:function(){console.log('created');},//在挂载开始之前被调用：相关的渲染函数首次被调用LbeforeMount:function(){console.log('beforeMount');},//el 被新创建的 vm.$el 替换, 挂在成功mounted:function(){console.log('mounted');},//数据更新时调用beforeUpdate : function(){console.log('beforeUpdate');},//组件 DOM 已经更新, 组件更新完毕 updated : function(){console.log('updated');},beforeDestroy:function(){console.log('beforeDestroy');},destroyed:function(){console.log('destroyed');}});setTimeout(function(){vm.msg = "学习vue呢::::::::::::::::::"},3000);setTimeout(function(){vm.$destroy()},6000);</script></html>
刚才开走
间隔3s 后走了
间隔5s 后走了
