美文网首页
Vue的生命周期函数

Vue的生命周期函数

作者: 前端小阿坤 | 来源:发表于2020-10-02 20:50 被阅读0次

每一个Vue实例或者组件都有一个完整的生命周期,一个完整的生命周期包括初始化阶段、运行中阶段和销毁阶段。

初始化阶段:

1.实例、组件被创建出来以后,就会被初始化事件和生命周期。然后就会执行beforeCreate钩子函数,这个时候,数据没有被挂载到,也不能获取真实dom,只是一个空壳,一般不做操作。

2.挂载数据、绑定事件后,然后执行created钩子函数,这个时候可以获取到数据,一般在这个阶段做一些数据操作,比如ajax请求等异步请求。

3.找到实例或者组件的对应的模板,编译模板将虚拟dom放入到render函数中 马上就要进行渲染,然后执行beforeUpdate钩子函数,这个时候虚拟dom马上就要被渲染成真实dom,在这个阶段也可以进行一些数据的操作,并且不会因此而触发updated钩子函数。

4.render函数将虚拟dom被渲染成真实dom,然后执行created钩子函数,这个阶段既可以获取数据,也可以获取到真实dom,所以可以在这个 阶段进行dom的操作。

运行中阶段:

5.当组件、实例数据发生更改后,会立即执行beforeUpdate钩子函数,构建新的虚拟dom与之前的虚拟dom进行diff算法比较之后进行重新渲染,一般不做操作。

6.当更新完成后,执行updated,数据已经更改完成,dom也重新渲染,可以获取到更新后的数据。

销毁阶段:

7.当调用$distroy方法后,立即执行beforeDestroy钩子函数,一般可以在这里做一些善后操作,比如清除计时器等。

8.组件、实例的数据绑定和事件监听等去掉后只剩些一个dom空壳,然后执行distroyed钩子函数。



相关文章

  • Vue学习笔记(12)-生命周期函数

    生命周期函数 生命周期函数代表的是Vue实例,或者是Vue组件,在网页中各个生命阶段所执行的函数。生命周期函数可以...

  • 😄--前端面试整理--VueJs

    1、Vue的指令都有哪些? 2、Vue的生命周期函数 3、除了生命周期函数还有哪些钩子函数 4、Vue组件是怎么进...

  • vue生命周期

    学习vue的生命周期 什么是生命周期函数? vue的生命周期函数(又称为钩子函数)是一个vue实例从开始创建,到初...

  • Vue生命周期函数调用的时间

    vue的生命周期函数有11个,常用的8个生命周期函数必须要掌握

  • vue基础知识精讲

    一、Vue实例生命周期函数 生命周期函数是vue实例在某一个时间点会自动执行的函数。 测试一下: 二、Vue的模板...

  • 了解vue.js的生命周期函数

    了解vue的生命周期函数和运行中事件,有助于我们更好地使用vue 具体代码文件 四个生命周期函数 beforeCr...

  • Vue 生命周期

    生命周期函数 生命周期函数就是 Vue 实例在某一个时间点会自动执行的函数 简单来说就是,钩子(生命周期函数)就好...

  • Vue生命周期

    Vue生命周期详解 一、Vue生命周期 与 作用 (生命周期钩子就是生命周期函数) (1)Vue生命周期:每个Vu...

  • vue的生命周期

    了解vue的生命周期函数和运行中事件,有助于我们更好地使用vue 四个周期函数: beforeCreate :第一...

  • vue.js 生命周期

    Vue实例 生命周期函数流程 —— beforeCreate、created、beforeMount、mounte...

网友评论

      本文标题:Vue的生命周期函数

      本文链接:https://www.haomeiwen.com/subject/nxfiuktx.html