vue生命周期浅解析

每个vue实例从创建到销毁都有一个生命周期，理解生命周中每个钩子的意义可以帮助我们快速理解使用vue
（下图源自vue官网）
vue实例化以后完成实例创建第一次渲染页面会依次执行beforeCreate、created、beforeMount、mounted,每当页面数据发生变化才会触发beforeUpdate、beforeUpdated，在关闭实例会依次执行beforeDestroy、destroyed。下面分别解释各函数钩子存在意义

1.beforeCreated(创建前)

vue实例化以后首先执行beforeCreated钩子，该钩子函数在数据观测和事件配置之前被调用，所以无法访问实例中的数据和方法

beforeCreated() {
	console.log(this.$data)  // undefined
	console.log(this.$el)  // undefined
	// el和data还未初始化
}

2.created(创建后)

vue实例完成创建，数据观测和事件配置已经完成，在钩子函数中可以调用methods里面的函数

created() {
	console.log(this.$data) // Object
	console.log(this.$el) // undefine
	// 已经完成了数据初始化，因此在这个阶段可以修改data中的数据
}

3.beforeMount（挂载前）

挂载前被调用，此时只能获取到data和虚拟的dom

beforeMount() {
	console.log(this.$data) // Object
	console.log(this.$el) // undefine
	// 这里已经完成虚拟dom的初始化只是未挂到外部html上
}

4.mounted(挂载后)

template中的html已经挂到外部html，展示在页面上，这个只在实例第一次渲染调用，当数据改变更新页面时是不会再调用这个钩子的，也就是说一个生命周期中只会调用一次

mounted() {
	console.log(this.$data) // Object
	console.log(this.$el) // <div class=""></div>
}

5.beforeUpdate(更新前)

数据发生改变时，虚拟dom发生改变的阶段，在这个阶段还可以对数据进行更改

6.updated（跟新后）

组件DOM已更新完毕，该钩子在渲染中不被调用

7.deforeDestroy(销毁前)

关闭实例销毁前这个阶段可以把页面数据重置

8.destroyed(销毁后)

该钩子在渲染中不被调用，实例销毁后，实例中的事件，子实例被销毁，所有东西都会解绑