浅谈vue的生命周期

1. vue的生命周期
   vue实例从创建到销毁的过程，就是vue的生命周期

2. 钩子函数
   vue实例从创建到销毁的过程中，会分成几个不同阶段，在每个阶段中会调用一些函数，这就给我们提供了执行自定义逻辑的机会。这些函数就叫做钩子函数
   注意：钩子函数不能使用箭头函数，因为箭头函数没有 this

3. vue生命周期的几个阶段及对应的钩子函数

阶段	钩子函数
create（初始）	beforeCreate（初始化之前，vue实例的挂载元素$el和数据对象$data都为undefined）、created（初始化之后，vue实例的数据对象$data有了，$el还没有。）
mount（加载）	beforeMount（vue实例的$el和$data都初始化了，但还是挂载之前虚拟的dom节点，$data还未替换）、mounted（vue实例挂载完成，$data成功渲染。）
update（更新）	beforeUpdate（$data更新之前）、updated（$data更新之后，谁改变了渲染谁，不是整个dom树重新渲染）
destroy（销毁）	beforeDestroy（销毁之前，vue 实例解绑之前）、destroyed（销毁之后，vue 实例解绑之后，但是页面上dom结构依然存在）

5. 执行顺序
   vm.beforeCreate ——> vm.created ——> vm.beforeMount ——>vm.mounted…
6. 页面第一次加载时会触发 beforeCreate,、created,、beforeMount,、mounted 这四个钩子函数
7. 每个钩子函数的一些使用场景
   beforeCreate：添加loading事件
   created：异步请求，访问后端接口拿数据
   beforeMount、mounted：可以访问和更改数据
   beforeUpdate：如果想看属性的变化，在这个阶段可以使用watch(属性监听)这个方法监听属性
   updated：对数据统一处理
   beforeDestroy：可以清理非vue资源,防止内存泄露
8. dom渲染在mounted中就已经完成了