vue生命周期阶段及方法 - 智学轩城

vue生命周期阶段及方法

老季人头像

老季人

2025-06-23 16:26:00

嘿,说起来 Vue 的生命周期,啊,那可真是。。嗯,得,我就给你简单说说。
首先,Vue 的生命周期啊,分几个阶段,啊,就像人的一生,从出生到老去,嗯,对,从创建到销毁。
1. 创建阶段:这个阶段啊,Vue 实例刚被创建,还没挂载到 DOM 上呢。这时候有几个方法:
- beforeCreate:实例初始化之后,数据观测和事件/watcher 设置之前被调用。

  • created:在这之后,实例已完成数据观测、属性和方法的运算、watch/event事件回调已设置。
    2. 挂载阶段:这个阶段,实例已经被挂载到 DOM 上啦。这时候也有几个方法:
    - beforeMount:在这之前,模板已编译完成,但尚未挂载到 DOM 上。
  • mounted:这时,已成功挂载,创建 el,并编译模板到 DOM。
    3. 更新阶段:当数据发生变化时,会触发这个阶段。方法有:
    - beforeUpdate:数据更新时调用,发生在虚拟 DOM 打补丁之前。
  • updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用这个钩子。
    4. 销毁阶段:当组件被销毁时,会经历这个阶段。方法有:
    - beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
  • destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
    啊,就这样啦,Vue 的生命周期嘛,就是这样一个过程。啊,对,就像人生一样,有出生、成长、衰老、死亡。嗯,就这样。
良伯瑜头像

良伯瑜

2025-07-21 16:32:38

Vue生命周期4个阶段:

  • 初始化阶段
  • 挂载阶段
  • 更新阶段
  • 销毁阶段
    生命周期方法:
  • 初始化:beforeCreate、created
  • 挂载:beforeMount、mounted
  • 更新:beforeUpdate、updated
  • 销毁:beforeDestroy、destroyed
    例如:created用于数据请求,mounted用于获取DOM元素。
    我自己还在验证,但经验是这样。