有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

Vue2x 生命周期执行过程

vue cat 8个月前 (02-13) 374次浏览 已收录 3个评论 扫描二维码

Vue实例有一个完整的生命周期,也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程,我们成为Vue 实例的生命周期,钩子就是在某个阶段给你一个做某些处理的机会。

页面一加载触的周期函数如下:

触发了前四个生命周期函数

beforeCreate  创建之前

created  创建完成

beforeMount  挂载之前

mounted   挂载

简单理解VUE生命周期:

生命周期就是vue实例从创建到销毁的过程。在页面一进来会走前四个,当数据发生变化会走更新期的那两个,当vue实例被销毁会走销毁期的那两个。

(1) beforeCreate(){ } // 创建之前,全都是undefined
(2) created(){ } // 创建完成,数据有了,但是挂载点还没有找到
(3) beforeMount(){ } // 挂载之前,数据有了,挂载点也找到了,但是双花括号指令等都没有被解析
(4) mounted(){ } // 挂载完成,数据有了,挂载点也找到了,DOM已经加载渲染完毕,我们一般在这里做数据交互、开启定时器、开启倒计时
(5) beforeUpdate(){ } // 视图更新之前,在这里获取的数据是新的数据
(6) updated(){ } // 视图更新完成,在这里获取的数据是新的数据
(7) beforeDestroy(){ } // 销毁之前,我们一般在这里清除定时器、清除倒计时
(8) destroyed(){ } // 销毁完成
vm.$destroy() // 销毁
vm.$mount() // 挂载

Vue生命周期图示

Vue2x 生命周期执行过程Vue生命周期经常调用Ajax函数:

在created的时候已经含有了data和methods,可以在created中调用Ajax。

个人习惯在mounted中调用Ajax,这个时候虚拟数据已经替换成了真实数据,调用接口结束之后,可能会操作dom,所以在mounted中调用。

在mounted中我们可以使用大量的异步操作

喜欢 (4)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(3)个小伙伴在吐槽
  1. 不错
    wu2022-04-23 16:35 回复 Windows 10 | Chrome 100.0.4896.127
  2. 写的可以
    wu2022-04-23 16:35 回复 Windows 10 | Chrome 100.0.4896.127
    • cat
      嘻嘻,写的没那么完善,多多补充
      cat2022-04-25 17:19 回复 Windows 10 | Firefox浏览器 99.0