vue生命周期及执行顺序

vue生命周期及执行顺序

1、系统自带生命周期一共有8个
	beforeCreate（创建前）
	created（创建后）
	beforeMount(载入前)
	mounted（载入后）
	beforeUpdate（更新前）
	updated（更新后）
	beforeDestroy（销毁前）
	destroyed（销毁后）
	
2、页面组件一旦加载执行生命周期
	beforeCreate（创建前）
	created（创建后）
	beforeMount(载入前)
	mounted（载入后）
	
3、页面组件一旦加载执行生命周期的不同点
	beforeCreate    ===》没有data没有el
	created  	    ===》有data没有el
	beforeMount     ===》有data没有el
	mounted  		===》有data有el
	
4、主要生命周期应用场景
	created  	    ===》一般发送请求
	mounted  		===》操作获取dom的插件
	
5、如果用到了vue内置的组件keep-alive，会多两个生命周期.
	activated
	deactivated

	keep-alive这个组件的作用就是能够缓存不活动的组件。
	组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不进行销毁，而是保存之前的状态，
	那么就可以利用keep-alive来实现，或者使用路由中的meta属性控制，meta中的keepAlive为true
	进行缓存，否侧不进行缓存。
	
	keep-alive上有两个属性：
	a:include 值为字符串或者正则表达式匹配的组件name会被缓存
	b:exclude 值为字符串或正则表达式匹配的组件name不会被缓存。

	例如：
	<keep-alive include="home">
		<router-view />
	</keep-alive>
	
	使用路由中的meta属性控制
	<keep-alive>
		<router-view v-if="$route.meta.keepAlive" />
	</keep-alive>
	<router-view v-if="!$route.meta.keepAlive" />
	
	存在的问题，因为组件被缓存，并没有被销毁，所以组件在切换的时候也就不会被重新创建，也就不会
	调用created等生命周期函数，所以此时要使用activated与deactivated来获取当前组件是否处于活动状态。
	
6、如果用到了keep-alive组件，生命周期的执行有以下变化

	第一次进入组件会执行
	beforeCreate（创建前）
	created（创建后）
	beforeMount(载入前)
	mounted（载入后）
	activated

	第二次、第三次.....进入组件会执行
	activated

父子组件生命周期及执行顺序

1、只有父组件时，页面组件一旦加载，生命周期及执行顺序
	beforeCreate（创建前）
	created（创建后）
	beforeMount(载入前)
	mounted（载入后）
	
2、存在父子组件时，页面组件一旦加载，生命周期及执行顺序
	父组件：beforeCreate、created、beforeMount
	子组件：beforeCreate、created、beforeMount、mounted
	父组件：mounted