vue生命周期

vue生命周期钩子函数

简单说:一个组件从开始到最后消亡所经历的各种状态,就是一个组件的生命周期。

生命周期钩子函数的定义:从组件挂载到页面上运行,再到页面关闭组件被卸载,这三个阶段总是伴随着各种各样的事件,这些事件,统称为组件的生命周期函数。

PS:Vue在执行过程中会自动条用生命周期钩子函数,我们只需要提供这些钩子函数即可。

PS:钩子函数的名称都是Vue中规定好的。

1、beforeCreate()

说明:在实例初始化后,数据观测(data observer)和event/watcher事件配置之前被调用

注意:此时无法获取data中的数据、methods中的方法。

2、created()

说明:这是一个常用的生命周期,可以调用methods中的方法、改变data中的数据。

使用场景:发送请求获取数据

3、beforeMounted()

说明:在挂载开始之前被调用

4、mounted()

说明:此时,vue实例已经挂载到页面中,可以获取el中的DOM元素,进行DOM操作。

5、beforeUpdated()

说明:数据更新时调用,发送在虚拟DOM重新渲染和打补丁之前。你可以在这个钩子中进一步更改状态,这不会触发附加的充渲染过程。

注意:此处获取的数据是更新后的数据,但是获取页面中的DOM元素更新之前的。

6、undated()

说明:组件DOM已经更新,所以你现在可以执行依赖DOM的操作。

7、beforeDestroy()

说明:实例销毁之前被调用。在这一步实例仍然完全可以用。

使用场景:实例销毁之前,执行清理任务,比如:清除定时器等。

8、destroyed()

说明:Vue实例销毁后被调用。调用后,Vue实例指示的所有东西都会解绑,所有的时间监听器都会被移除,所有的子实例都会被销毁。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Vue 实例 在文档中经常会使用 vm 这个变量名表示 Vue 实例,在实例化 Vue 时,需要传入一个选项对象,...
    鄙人才疏学浅阅读 652评论 0 1
  • 参照翻译 Understanding Vue.js Lifecycle Hooks 理解组件的生命周期,有利于我们...
    bacbcc94613b阅读 5,189评论 0 6
  • 什么是生命周期? Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→...
    travelClark阅读 2,650评论 0 36
  • 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM ...
    刘圣凯阅读 998评论 0 1
  • 2018年是狗年。或许是为了迎接狗年,2017年我养了一只狗。可说到根上,养狗其实是为了给“孤独”...
    心向阳光_振华阅读 453评论 0 0

友情链接更多精彩内容