美文网首页vue专辑
vue之生命周期(四)

vue之生命周期(四)

作者: 笑红尘123 | 来源:发表于2019-11-15 16:34 被阅读0次

1.什么是生命周期

官方定义:
任何 Vue 实例在被创建时都要经过一系列的初始化过程,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,方便让用户在不同阶段添加对应的运行代码
个人定义:
生命周期函数是指组件在某一阶段调用的函数


lifecycle.png

通过图示可以看出生命周期可以分为四个阶段和八种状态:

四个阶段:
create   创建阶段
mount    挂载阶段
update   更新阶段
destroy  销毁阶段
八种状态:
beforeCreate()方法是在实例还没有别完全创建出来之前执行,这个方法执行的时候,无论是data中的数据还是methods中的方法都没有被初始化,所有的值都为undefined

created()方法是此时已经初始化好了Vue对象,这是最早能操作data中数据和methods中方法的地方

beforeMount()这是指该模板已经在内存中编辑完成,但是尚未将其渲染到页面中去,在该方法执行期间,页面中的元素还没有经过Vue的渲染,此时的{{msg}}仍然是一个“{{msg}}”

mounted(),表示内存中的模板已经渲染到页面中去,这个时候数据已经可以经过Vue的编译,该函数是实例创建的最后一个函数,此时实例已经完全创建好了,如果没有别的操作的话,此函数就静静躺在内存中,如果要使用某些插件操作页面上的DOM,最早要在mount中操作

beforeUpdate()事件执行的时候,页面中显示的数据并没有更新,但是内存中的数据已经改变,也就是说此时页面尚未和最新的数据保持同步

update()事件执行的时候,页面中的数据已经和内存中保持一致了,也就是说此时已经是最新的了

beforeDestroy() 当执行beforeDestroy阶段时vue实例已经从运行阶段,进入到销毁阶段,但是此时项data和methods里面的属性和方法还依然可以使用

destroyed()   当执行到destroyed时组件已经完全被销毁,此时实例中所有的属性、方法、过滤器等等都已不能再去使用

相关文章

  • vue(2)生命周期

    一、Vue生命周期 vue 生命周期有 创建、挂载、更新、销毁 四个阶段 创建前(beforeCreate):实例...

  • vue生命周期

    一 vue生命周期 Vue的生命周期:就是vue实例从创建到销毁的全过程 二 vue生命周期钩子 vue生命周期...

  • vue生命周期

    vue生命周期详: vue生命周期详解图: vue生命周期详解代码展示:

  • Vue生命周期

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

  • 前端面试题-面试用

    一、Vue二、JS三、Html + CSS四、网络相关 一、vue 一)、 生命周期 beforeCreate(创...

  • vue之生命周期(四)

    1.什么是生命周期 官方定义:任何 Vue 实例在被创建时都要经过一系列的初始化过程,需要设置数据监听、编译模板、...

  • vue3较vue2的特别之处 - 生命周期

    vue2 生命周期 vue3 生命周期 将 Vue2 的生命周期钩子代码更新到 Vue3 参考地址:https:/...

  • Vue 2.0修仙之路 — 生命周期和钩子函数

    生命周期过程 HTML代码 JS 代码 原网址:Vue之生命周期函数:https://cn.vuejs.org/v...

  • 前端之路-VUE面试题

    vue生命周期面试题vue 生命周期是什么? Vue 实例从创建到销毁的过程,就是生命周期 beforeCreat...

  • Vue.js入门(二):生命周期

    1 生命周期 Vue生命周期是Vue实例从创建到销毁的过程,就是生命周期。在Vue实例的生命周期过程中会运行生命周...

网友评论

    本文标题:vue之生命周期(四)

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