欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue 的生命周期

程序员文章站 2022-03-03 21:56:43
beforeCreate(){} 创建之前data ----- undefindmethod --- undefind$el ------ undefindcreated(){} 创建完成 (如果需要用请求到的数据渲染页面, 可以在此处发请求)data ----- 数据观测(data observer) // 尽量不要在此处操作datamethod --- 可用$el ------ undefindbeforeMount(){} 挂载之前 ....
  • beforeCreate(){} 创建之前
data ----- undefind
method --- undefind
$el ------ undefind
  • created(){} 创建完成 (如果需要用请求到的数据渲染页面, 可以在此处发请求)
data ----- 数据观测(data observer) // 尽量不要在此处操作data
method --- 可用
$el ------ undefind
  • beforeMount(){} 挂载之前 (这一步把正在内存中渲染好的模板结构替换到页面上)
data ----- 数据观测(data observer)
method --- 可用
$el ------ undefind
  • mounted(){} 挂载完成 (组件创建阶段最后的一个生命周期函数)
data ----- 数据观测(data observer)
method --- 可用
$el ------ 创建完成 // 如果使用到一些第三方的UI插件, 而且这个插件还需要被初始化, 那么, 
必须在mounted中来初始化插件
  • beforeUpdate(){} 更新之前
正在根据最新的data数据,重新渲染内存中的的模板结构;并把渲染好的模板结构替换到页面上,可以
在这个钩子中进一步地更改状态,
这不会触发附加的重渲染过程
  • updated(){} 更新之后
当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作
  • beforeDestroy(){} 销毁之前
实例销毁之前调用, 组件即将被销毁, 但是还没有真正开始销毁, 在这里, 实例仍然完全可用, data、
methods等数据或方法,依旧可以被
正常访问
  • destroyed(){} 销毁完成
vue 实例销毁后调用, Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子
组件也会被销毁, data和methods都
不可使用
  • activated(){} 如果页面有 keep-alive 缓存功能, 这个函数会触发
当我们运用了组件缓存时, 如果想每次切换都发送一次请求的话, 需要把请求函数写在activated中, 
写在created或mounted中其只会在
首次加载该组件的时候起作用在服务器端渲染期间不被调用, 就是在挂载后和更新前被调用

本文地址:https://blog.csdn.net/qg2276879379/article/details/108119079

相关标签: vue js