跳至主要內容

Vue生命周期

Guitar大约 3 分钟

Vue生命周期：即Vue实例从创建到*销毁（指取消vue对容器的托管、取消事件监听等，对象仍在内存中）*的过程。

生命周期图示

el 配置项或 $mount 方法决定了托管哪个容器。

模板语句指定了Vue接管容器时的样子。（缺省template配置项时，将托管容器原型 outerHTML 作为模板）

Vue 实例生命周期
image-20230523211140138
image-20230523211140138

生命周期钩子函数

  1. 初始阶段

    beforeCreate() 创建前

    created() 创建后

  2. 挂载阶段

    beforeMount() 挂载前

    mounted() 挂载后

  3. 更新阶段

    beforeUpdate() 更新前

    updated() 更新后

  4. 销毁阶段

    beforeDestroy() 销毁前

    destroyed() 销毁后

生命周期钩子函数直接在 vm 构造函数中以配置项的形式给出。如：

beforeCreate : function(){
    
}
destoryed(){
    
}

初始阶段

  1. 创建 Vue 实例 vm（此时 Vue 实例已经完成了创建）
  2. 初始化事件对象和生命周期
  3. 调用 beforeCreate()钩子函数
    • 此时还无法通过 vm 去访问 data 对象的属性
  4. 初始化数据代理和数据监测
  5. 调用 created()钩子函数
    • 此时数据代理和数据监测创建完毕，已经可以通过 vm 访问 data 对象的属性
  6. 译模板语句生成虚拟 DOM
    • 此时虚拟 DOM 已经生成，但页面上还没有渲染。

该阶段适合做什么？

beforeCreate：可以在此时加一些 loading 效果。

created：结束 loading 效果。也可以在此时发送一些网络请求，获取数据。也可以在这里添加定时器。

挂载阶段

  1. 调用 beforeMount()钩子函数
    • 此时页面还未渲染，真实 DOM 还未生成
  2. 给 vm 追加 $el 属性，用它来代替 el（接管el所在容器（元素）），$el 代表了真实的 DOM 元素
    • 此时真实 DOM 生成，页面渲染完成
  3. 调用 mounted()钩子函数
    • 在钩子中可以操作页面的 DOM 元素了。vm.$el 可以访问了。

更新阶段

  1. data 发生变化（这是该阶段开始的标志）
  2. 调用 beforeUpdate()钩子函数
    • 此时只是内存中的数据发生变化，页面还未更新
  3. 虚拟 DOM 重新渲染和修补
  4. 用 updated()钩子函数
    • 此时页面已更新

该阶段适合做什么？

beforeUpdate：适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

updated：页面更新后，如果想对数据做统一处理，可以在这里完成。

销毁阶段

  1. vm.$destroy()方法被调用（这是该阶段开始的标志）
  2. 调用 beforeDestroy() 钩子函数
  • 此时 Vue 实例还在。 vm 上的监视器、vm 上的子组件、vm 上的自定义事件监听器也还在，但是它们都已经不能用了。此时修改 data 也不会重新渲染页面了
  • 适合做销毁前的准备工作，如清除定时器。
  1. 卸载子组件和监视器、解绑自定义事件监听器
  2. 调用 destroyed()钩子函数
    • 虽然 destroyed 翻译为已销毁，但此时 Vue 实例还在，空间并没有释放，只不过马上要释放了
    • 这里的已销毁指的是 vm 对象上所有的东西都已经解绑完成了。（只留Vue的功绩，不留下Vue的身影）
Copyright ©2024-present Guitar