<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue生命周期</title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg" />
<div>{{msg}}</div>
<button @click="xiaohui">销毁</button>
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
msg:'生命周期'
},
//方法
methods:{
//
xiaohui:function(){
console.log('销毁')
this.$destroy();
}
},
//挂载（初始化相关属性）
//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
beforeCreate:function(){
console.log('beforeCreate')
},
/* 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，
property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。 */
created:function(){
console.log('created')
},
/* 在挂载开始之前被调用：相关的 render 函数首次被调用。 */
beforeMount:function(){
console.log('beforeMount')
},
/* 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。 */
/* 注意 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick： */
mounted:function(){
console.log('mounted');
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
console.log('视图和子组件都挂载成功')
})
//这里一旦被触发。就代表初始化已经完成。模板内容已经存在。可以开始填充数据了。
//调用后台接口。获取数据。绑定到模板里面
},
/* 更新(元素或者组件的变更操作) */
//数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
beforeUpdate:function(){
console.log('beforeUpdate')
},
//当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
updated:function(){
console.log('updated')
},
/* 销毁(销毁所有属性) */
//销毁可以释放一些内存出来。如果不需要一些实例可以进行销毁
//实例销毁之前调用。在这一步，实例仍然完全可用。
beforeDestroy:function(){
console.log('beforeDestroy')
},
//被 keep-alive 缓存的组件激活时调用。
destroyed:function(){
console.log('destroyed')
}
})
</script>
</html>
