作者:loto1115丨 | 来源:互联网 | 2023-08-27 07:22
每个 Vue实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到DOM、在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户机会在一些特定的场景下添加他们自己的代码。
beforeCreate
|
在实例初始化之后,数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM结构都没有初始化 什么都做不了
|
created
|
在实例创建完成后被立即调用此时data 和 methods已经可以使用 但是页面还没有渲染出来
|
beforeMount
|
在挂载开始之前被调用 此时页面上还看不到真实数据 只是一个模板页面而已
|
mounted
|
el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。 数据已经真实渲染到页面上 在这个钩子函数里面可以进行数据请求等
|
beforeUpdate
|
数据更新时调用,页面上数据还是旧的
|
updated
|
由于数据更新完毕,页面上数据已经替换成最新的
|
beforeDestroy
|
实例销毁之前调用
|
destroyed
|
实例销毁后调用
|
|