vue生命周期的理解

vue生命周期是什么

Vue的生命周期是vue实例从创建到销毁的过程，在生命周期的不同阶段对应的钩子函数实现组件的数据管理和DOM渲染两大重要功能

Vue生命周期又分为8个阶段：
beforeCreate[创建前]

实例初始化之后,此时数据观测和初始化事件还未开始，不能获取DOM节点

created[创建后]

Vue实例已经创建;数据观察,属性和 方法配置完成，但是$el不可用

beforeMount[载入前]

在挂载之前调用: 相关的`render`函数(模板)首次被调用, 完成编译模板, `data`里面的数据和模板生成`html`。注意此时还没有挂载`html`到页面上,但是`vue`挂载的根节点已经创建

mounted[载入后]

`el`被新创建的`vm.$el`替换，并挂载到实例上去之后调用该钩子(数据和DOM都已经渲染结束)

beforeUpdate[更新前]

vue遵循数据驱动DOM的原则；当Vue的任何数据，都会触发该函数,此钩子函数在服务器端渲染期间不被调用

updated[更新后]

此阶段DOM会和更改过的内容同步; 所以应该避免在此阶段更改状态，防止死循环

beforeDestroy[销毁前]

实例销毁前，实例仍然完全可用

destroyed[销毁后]

Vue 所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用

Vue生命周期的作用

精准的控制数据流及其对DOM的影响

Vue第一次加载页面会触发哪些钩子函数

beforeCreate、created、beforeMount、mounted

Vue每个周期具体适合哪些场景

Created进行数据异步获取, 初始化数据
mounted挂载DOM节点元素的获取
nextTick针对单一的事件更新数据后立即操作DOM
updated任何数据的更新,如果要做统一的业务逻辑处理使用此钩子函数
watch监听数据变化,并做相关业务处理

created和mounted的区别

created: 在模板渲染成html前调用,通常初始化某些属性,然后渲染成视图
mounted：在模板渲染成html后调用，通常是初始化页面之后，再对html的dom节点进行一些需要的操作

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

一般放在created钩子函数中，因为此时数据data方法methods均已初始化完成