vue组件生命周期

59 阅读1分钟

什么是组件生命周期

一个组件从 创建出来 到 销毁 的整个过程就是生命周期

生命周期函数(钩子函数)

vue 框架内置函数,随着组件的生命周期,自动 按次序 执行

作用:特定的时间点,执行某些特定的操作

场景: 组件创建完毕后,可以在created 生命周期函数中发起Ajax 请求,从而初始化 data 数据

四个阶段:

  • 初始化 => 创建组件   => beforeCreate created
  • 挂载 => 渲染显示组件 =>  beforeMount mouted
  • 更新 => 修改了变量 => 触发视图刷新 => beforeUpdate updated
  • 销毁 => 切换页面 => 会把组件对象从内存删除 => beforeDestory destoryed

官网文档

$refs使用

$refs可以帮我们获取dom元素,具体如下:

Snipaste_2022-05-08_20-41-53.png

Snipaste_2022-05-08_20-42-20.png

Snipaste_2022-05-08_20-44-16.png

nextTick使用

Snipaste_2022-05-08_20-47-41.png

Snipaste_2022-05-08_20-46-23.png