vue-总结05-高级-生命周期

vue生命周期

为什么会有生命周期？

vue为了在一个组件的从创建到销毁的一系列过程中添加一些功能，方便我们更好的去控制组件

	1.beforeCreate
	2.created
	3.beforeMount
	4.mounted
	5.beforeUpdate
	6.updated
	7.beforeDestroy 
	8.destroyed 
	9.deactivated
	10.activated
	11.errorCaptured

上面有11个，需要了解的有8个，实际使用就4个，activated和deactivated出现在特定场景 keep-live
vue的生命周期分为3个阶段，8个钩子函数

初始化（钩子函数都是自动执行的）

初始化钩子函数执行一次，且都是自动执行的。
当我们页面第一次加载时的功能应该写在哪里呢？(写在create里，或者mounted里，个人偏向create里面)

	1. beforeCreate 	（不需要动）	
	-为整个生命周期做准备工作，初始化事件和自身或是子组件的生命周期做准备			
	
	2. careated	
	- 适合做数据请求，可以修改一次数据（重点修改一次数据）
	-对data选项中的数据进行初始化
	-数据可以拿到，真实dom拿不到
	-！！！！因为mounted里面只能做静态数据的第三方库的实例化，updated里面会重复实例化，
	所以可以在created里面使用    Vue.nextTick（function（）｛实例化｝）在真实dom渲染结束后执行
	还能写成this.$nextTick(function(){实例化})
	
	3-beforeMount（不用动）
	-判断是否有el     
	    有的话会自动挂载
	    没有的话需要通过 .$mount('el') 手动挂载
	-判断是否有模板
		有的话会通过render函数将jsx语法转换成VDOM对象模型，以供diff对比
	
	4-mounted
	- 适合做数据请求，数据修改，可以操作真实dom但是不推荐操作真实dom，！！！一般用来做静态数据的第三方库的实例化
	-将VDOM渲染为真实DOM，然后插入页面

运行中

	5.beforUpdata(数据改变，触发)
	-监听data里的数据，一旦数据发生改变，就会生成新的 VDOM
	
	6.updated（数据改变，触发）
	-更新结束，通过diff算法对比新旧VDOM，生成patch补丁对象，然后将补丁对象渲染成真是DOM
	-渲染的是变化的部分
	-得到了真实DOM，DOM操作，实例化第三方库  ！！！会造成重复实例化的问题

销毁

	7.beforeDestroy
	-7跟8 没有太大区别  所以说一个就可以了
	
	8.destroyed
	-当组件被删除之后，组件里的如：第三方库的实例化，滚动事件，这些都一个被删除，所以就需要用到这个钩子函数做善后。
	
	-内部销毁
	-外部销毁
		 区别：都可以删除组件，但是内部销毁会留有组件真实dom的外壳

外部销毁

内部销毁