8-vue生命周期

钩子函数（自定执行的函数，我们都可以称之为钩子函数）不用你管，会自动执行

生命周期

路由

自定义指令

生命周期钩子函数

在固定的时间，调用固定的函数

页面从创建在加载==== 加载期（初创期、挂载期）

只会执行1次（这4个 各自 只会执行1次）

更新期

页面刷新了，页面重新渲染了，beforeUpdate updated 自动调用

会执行很多次

销毁期

@click="c='del'"

切换 变成了 第2个组件

当前组件在内存中给删除掉，就代表给 销毁了

vuejs：

<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
		data:{
			i:0,
			c:'abc'
		},
		beforeCreate(){
			console.log('1')
		},
		created(){
			console.log('2')
		},
		beforeMount(){
			console.log('3')
		},
		mounted(){
			console.log('4')
		},
		beforeUpdate(){
			console.log('5')
		},
		updated(){
			console.log('6')
		},
		beforeDestroy(){
			console.log('7')
		},
		destroyed(){
			console.log('8')
		}
	})
</script>

预览效果：

其中4个生命周期钩子函数，在控制台的 有 输出

其他钩子函数都没有调用执行。

当我们 点击按钮的时候，数据更新，会 触发2个钩子函数的调用执行

beforeUpdate(){

console.log('5')

},

updated(){

console.log('6')

},

<div id="app">
	{{i}}
	<button @click="i++">+</button>
</div>

预览效果，如下所示：

什么是生命周期

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。

vue实例在整个生命周期中自动挂载了很多生命周期钩子（回调函数），在这些回调函数中可以访问vue的属性、方法来完成操作。

vue生命周期示意图：

beforeCreate  --- vue实例创建之前

created -----------vue实例创建之后

beforeMount ---挂载之前

mounted -----------挂载之后

beforeUpdate ---更新之前

updated -----------更新之后

beforeDestroy ---销毁之前

destroyed -----------销毁之后

包含了这么多阶段。我们结合他们各个阶段所完成的工作。仔细分析这些生命周期钩子函数

beforeCreate--在实例初始化之后，数据观测（data observer）和event/watcher事件配置之前被调用。

created--实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测（data observer）属性和方法的运算，watch/event事件回调。

然而，挂载阶段还没开始。$el属性目前不可见。

beforeMount--在挂载开始之前被调用: 相关的render函数首次被调用。

mounted--el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.$el也在文档内。

beforeUpdate--数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态。这不会触发附加的重渲染过程。

updated--由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件DOM已经更新，所以你现在考研执行依赖于DOM的操作。

activated--keep-alive组件激活时调用。

deactivated--keep-alive组件停用时调用。

beforeDestroy--实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed--vue实例销毁后调用。调用后，vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。