Vue学习之——Vue生命周期

Vue生命周期

1.什么是生命周期？

Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染更新、渲染卸载等一系列过程，就称之为Vue的生命周期。

2.vue生命周期的作用是什么？

在Vue实例经过一系列初始化的过程中也会运行一些叫做 生命周期钩子 的函数，生命周期里面的这些事件钩子，给予用户在不同阶段可以添加自己代码的机会。

3.生命周期函数

Vue生命周期总共分成8个阶段：创建前后，载入前后，更新前后，销毁前后。

beforeCreate(创建前)

实例完全被创建出来之前，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。数据观测和事件配置之前。

• 适用场景 ：

1. 页面加载loading事件

created(创建后)

数据对象data已存在，可以调用methods中的方法，操作data中的数据，但dom未生成,$el未存在。在这一步，实例已完成以下的配置：数据观测，属性和方法的运算，watch/event事件回调。

• 适用场景 ：

1. data、commputed、watch、event回调、methods.
2. ajax异步数据请求
3. 初始化操作
4. DOM不根据数据渲染

beforeMount(挂载前)（该钩子在服务器端渲染期间不被调用）

vue实例的$el和data都已初始化，挂载之前为虚拟的dom节点，模板已经在内存中编译完成了，但是尚未把模板渲染到页面中。data.message未替换。

• 适用场景

1. 运行时执行render函数

activated*（该钩子在服务器端渲染期间不被调用）*

keep-alive 组件激活时调用(只有在keep-alive组件才会被调用)

deactivated*（该钩子在服务器端渲染期间不被调用）*

keep-alive 组件停用时调用(只有在keep-alive组件才会被调用)

mounted(挂载后)（该钩子在服务器端渲染期间不被调用）

vue实例挂载完成，data.message成功渲染。内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。实例创建期间的最后一个生命周期函数，当执行完mounted就表示实例已经被完全创建好了，Dom渲染在mounted中就已经完成了。

• 适用场景

1. 挂载元素，获取DOM节点、数据在DOM渲染完毕
2. created()的异步更新DOM使用$nextTick(callback())

beforeUpdate(更新前)

当data变化时，会触发beforeUpdata方法。data数据尚未和最新的数据保持同步。

updated(更新后)

当data变化时，会触发updata方法。页面和data数据已经保持同步了。

beforeDestory(销毁前)

组件销毁之间调用，在这一步，实例仍然完全可用。

destoryed(销毁后)

组件销毁之后调用，对data的改变不会再触发周期函数，vue实例已解除事件监听和dom绑定，但dom结构依然存在。

$nextTick(callback)

• 适用场景

1. 区别updated()
2. 分别处理不同数据更新事件
3. 异步数据更新dom
4. 不更新dom可用watch
5. 更新数据后立即操作dom

watch

• 适用场景

1. 监听数据变化，并做相应的处理
2. 复杂逻辑
3. 异步数据

computed

• 适用场景

1. 简单逻辑

created和mounted的区别?

• beforecreated：el 和 data 并未初始化
• created:完成了 data 数据的初始化，el没有 渲染前调用，初始化某些属性值，再渲染
• beforeMount：完成了 el 和 data 初始化
• mounted ：完成挂载 渲染后再调用，初始化页面完成后，再对DOM节点进行操作

vue获取数据在哪个周期函数?

• 一般created/beforeMount/mounted 皆可
• 正常获取在 created 里面即可，如果涉及到需要页面加载完成之后(DOM操作)的就用 mounted