vue生命周期

最近一直在做vue项目，却对vue的生命周期不太了解，所以在每个钩子函数中打印了下，方便区分，看的时候要认真对比分析。

	<template>
	    <div @click='changedata'>
	        生命周期调用顺序{{dataname}}
	    </div>
	</template>
	
	<script>
	
	export default {
	    data(){
	        return {
	            dataname: '开始'
	        }
	    },
	    methods: {
	        changedata(){
	            this.dataname = '开始变了'
	        }
	    },
	    // 创建前
	    beforeCreate(){// 有       无        无
	         console.log(this, this.$el, this.$data)
	      // new Vue之后 组件的选项对象还没有创建 el 和 data没有初始化 没有办法访问methods,data, computed的方法和数据
	    },
	
	    // 创建后  实例完成 挂载没有开始
	    created(){  // 有       无        有
	      console.log(this, this.$el, this.$data)
	      // 实例创建完成 已经完成了数据观测 属性和方法的运算 watch/event事件回调 完成了data的数据的初始化,el没有,挂载阶段还没有开始
	    },
	
	    // 挂载前
	    beforeMount(){// 有       无        有
	        console.log(this, this.$el, this.$data)
	      // 挂载开始之前被调用,相关的render函数首次被调用（虚拟DOM), 实例已经完成以下的配置：编译模版,把data里面的数据和模版生成html,完成了el和data初始化,注意此时还没有挂在html到页面上
	    },
	
	    // 挂载后 this.$el存在了 
	    mounted(){  //  有       有        有
	       console.log(this, this.$el, this.$data)
	      // 挂载完成,也就是模版中的html渲染到HTML页面中,这里面可以做一些ajax操作,mounted只会执行一次
	    },
	
	    // 更新前 当data里面的数据更新之前执行
	    beforeUpdate(){//有       有        有
	        console.log(this, this.$el, this.$data)
	      // 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前, 可以在该钩子中进一步地更改状态,不会触发附加地重渲染过程
	    },
	
	    // 更新后 当data里面的数据更新之后执行
	    updated(){ //  有       有        有
	      console.log(this, this.$el, this.$data)
	      // 它触发的原因是 数据更改导致虚拟dom重新渲染和打补丁, 组件dom已经更新,避免在此更改状态,可能会导致更新无限循环,该钩子在服务器端渲染期间不被调用
	    },
	
	      
	    // 销毁前 切换别的组件的时候会调用
	    beforeDestroy(){//有       有        有
	         console.log(this, this.$el, this.$data)
	      // 实例销毁前调用,实例仍然完全可用 this 仍然可以访问 可以在这里面做一些重置的操作,比如清除掉组件中的定时器和监听的dom事件
	    },
	
	    // 销毁后 切换别的组件的时候会调用
	    destroyed(){// 有       有        有
	      console.log(this, this.$el, this.$data)
	      // 实例销毁之后调用,调用后,所有的事件监听器一处,所有的子实例也会销毁,该钩子在服务器端渲染期间不被调用
	    }   
	}
	</script>