vue生命周期函数

<div id='box'>
	<button @click='xx = !xx'>切换<button/>
<div/>
<script>
Vue.component('abc',{
	template:"<div>abc组件 <input type='text' v-model='mess' </div>"
	data(){
		return{
		mess:''
	}
	created(){
           console.log('created-组件创建完成调用')
    },
    beforeCreate(){
           console.log('beforeCreate-组件创建之前调用')
    },
    beforeMount(){
           console.log('beforeMount ->组件挂载之前调用')
    },
    mounted(){
           console.log('mounted ->组件挂载完成调用')
    },
    beforeUpdate(){
           console.log('beforeUpdate ->组件更新之前调用')
    },
    updated(){
           console.log('updated ->组件更新完成调用')
    },
    beforeDestroy(){
           console.log('beforeDestroy ->组件销毁之前调用')
    },
    destroyed(){
           console.log('destroyed ->组件销毁完成调用')
    }

)}
new Vue({
	el:'#box', //挂载节点
	data:{
		xx:false
	}
})
<script/>

大家可以更详细的了解一下vue生命周期函数执行过程

在vue生命周期的不同阶段通过对应的钩子函数来实现组件数据管理和DOM渲染两大重要功能。
创建阶段：
beforecreate：实例已经初始化，但不能获取DOM节点。(没有data，没有el)
created:实例已经创建，仍然不能获取DOM节点。(有data，没有el)
载入阶段：
beforemount：模板编译完成，但还没挂载到界面上。(有data，有el)
mounted：编译好的模板已挂载到页面中(数据和DOM都已经渲染出来)。
更新阶段：
beforeupdate：数据发生变化立即调用，此时data中数据是最新的，但页面上数据仍然是旧的(检测到数据更新时，但DOM更新前执行)。
updated：更新结束后执行，此时data中的值和页面上的值都是最新的。
销毁阶段：
beforedestroy：当要销毁vue实例时，在销毁之前执行。
destroy：在销毁vue实例时执行。