vue 生命周期

Vue.js 实例生命周期（原图出自于Vue.js 官网），如图2-2 所示。
init: 在实例开始初始化时同步调用。此时数据观测、事件等都尚未初始化。2.0 中更名
为beforeCreate。
created ：在实例创建之后调用。此时已完成数据绑定、事件方法，但尚未开始DOM 编
译，即未挂载到document 中。
beforeCompile: 在DOM 编译前调用。2.0 废弃了该方法，推荐使用created。
beforeMount: 2.0 新增的生命周期钩子，在mounted 之前运行。
compiled: 在编译结束时调用。此时所有指令已生效，数据变化已能触发DOM 更新，但
不保证el 第一次插入文档之后调用。2.0 废弃了该方法，推荐使用mounted。这
个变化其实已经改变了ready这个生命周期状态，相当于取消了在el 插入DOM 时调用，ready 会在第一次attached 后调用。操作appendTo()），直接操作vm.el 从DOM 删除时调用，而且必须是指令或
实例方法。2.0 中同样废弃了该方法。
beforeDestroy: 在开始销毁实例时调用，此刻实例仍然有效。
destroyed: 在实例被销毁之后调用。此时所有绑定和实例指令都已经解绑，子实例也被销毁。
beforeUpdate: 2.0 新增的生命周期钩子，在实例挂载之后，再次更新实例（例如更新
data）时会调用该方法，此时尚未更新DOM 结构。
updated:2.0 新增的生命周期钩子，在实例挂载之后，再次更新实例并更新完DOM 结构
后调用。
activated ：2.0 新增的生命周期钩子，需要配合动态组件keep-live 属性使用。在动态
组件初始化渲染的过程中调用该方法。
deactivated ：2.0 新增的生命周期钩子，需要配合动态组件keep-live 属性使用。在动
态组件移出的过程中调用该方法。

var vm = new Vue({
　 el : '#app',
　 init: function() {
　　 console.log('init');
　 },
created: function() {
　　 console.log('created');
　 },
　 beforeCompile: function() {
　　 console.log('beforeCompile');
　 },
　 compiled: function() {
　　 console.log('compiled');
　 },
　 attached: function() {
　　 console.log('attached');
　 },
　 dettached: function() {
　　 console.log('dettached');
　 },
　 beforeDestroy: function() {
　　 console.log('beforeDestroy');
　 },
　 destroyed: function() {
　　 console.log('destroyed');
　 },
　 ready: function() {
　　 console.log('ready');
　　 // 组件完成后调用destroy();
　 }
});