vue 生命周期

119 阅读1分钟

什么是vue生命周期?

vue组件从创建到销毁的过程

生命周期钩子函数 ?

vue 内置的函数 不需要我们手动调用 随着生命周期的变化会自动执行

vue 生命周期

1.初始化

  • beforeCreat : vue 实例初始化后 数据观测和 事件配置之前被调用
  • created : 实例创建完成后同步调用 methods data computed 等数据注入完成 $el property 不能用 (此处可以发送ajax 请求做一些初始化操作)

2.挂载

  • beforeMount : 挂载之前被调用 : 相关的render 函数被首次调用,在虚拟DOM中生成HTML 可以获取到数据这个阶段 响应式数据发生更新,虚拟DOM 重新渲染之前被调用 ,当前阶段更改数据不会造成重复渲染
  • mounted : 真实DOM挂载完毕 数据完成双向绑定 可以用 $refs 操作DOM echarts 初始化图表等库 需要用到真实DOM echarts.init(DOM对象)

3.更新阶段

  • beforeUpdate : 数据发生改变后 可以获取最新数据但是页面DOM没有更新
  • updated : 数据和DOM 都被更新 可以获取当前最新数据 ****注意此处避免修改数据,可能会造成数据 循环更新

销毁

  • beforeDestroy : 实例销毁之前 实例可用 这个阶段一般进行收尾如清除定时器,销毁父组件对子组件的重复监听
  • destroy : 销毁