2021-09-01

常用的生命周期钩子函数

生命周期的作用？

Vue 所有的功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。

父子组件的生命周期

• 执行顺序：
• 父组件开始执行到beforeMount 然后开始子组件执行，最后是父组件mounted。
• 如果有兄弟组件，父组件开始执行到beforeMount，然后兄弟组件依次执行到beforeMount，然后按照顺序执行mounted，最后执行父组件的mounted。
• 当子组件挂载完成后，父组件才会挂载。
• 当子组件完成挂在后，父组件会主动执行一次beforeUpdated/updated钩子函数（仅首次）
• 父子组件在data变化中是分别监控的，但是更新props中的数据是关联的。
• 销毁父组件时，先将子组件销毁后才会销毁父组件。
• 兄弟组件的初始化（mounted之前）是分开进行，挂载是从上到下依次进行
• 当没有数据关联时，兄弟组件之间的更新和销毁是互不关联的

beforecreate(创建前)

此时:无法通过vm访问到data中的数据，methods中的方法

created(创建后)

此时：可以通过vm访问到data中的数据、methods中配置的方法

beforemount(载入前)

此时：页面呈现的是未经vue编译的DOM结构，所有的DOM操作都是无效的

mounted(载入后)

此时：对DOM的操作均是有效的，至此初始化过程结束，一般在此时进行：开启定时器、发送网络请求、订阅消息、绑定事件、等初始化操作

beforeUpdate(更新前)

此时：数据是新的，但页面是旧的，即：页面尚未和数据保持同步

updated(更新后)

此时：数据是新的，但页面也是新的，即：页面和数据保持同步

beforeDestroy(销毁前)

此时：vm中所有的：data、methods、指令等等，都处于可用状态，马上要执行销毁的过程，在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾操作

Destroyed(销毁后)

在销毁后，会触发destroyed钩子函数