`
hereson
  • 浏览: 1428699 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

Vue实例的生命周期

    博客分类:
  • vue
阅读更多
每个钩子函数都在啥时间触发
beforeCreate

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

实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
beforeMount

在挂载开始之前被调用:相关的 render 函数首次被调用。
mounted

el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。
beforeUpdate

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

由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。

该钩子在服务器端渲染期间不被调用。

beforeDestroy

实例销毁之前调用。在这一步,实例仍然完全可用。
destroyed

Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
分享到:
评论

相关推荐

    基于Vue实例生命周期(全面解析)

    下图是Vue实例生命周期的图示 解释 接下来,根据提供的生命周期钩子,对Vue实例各个阶段的情况进行详细说明 【beforeCreate】 在实例开始初始化时同步调用。此时数据观测、事件等都尚未初始化 【created】 在实例...

    Web前端框架应用:第2章 Vue开发基础-生命周期.pptx

    2.5 Vue生命周期;2.5 Vue生命周期;2.5 Vue生命周期;创建vm实例;2.5 Vue生命周期;2.5 Vue生命周期;2.5 Vue生命周期;2.5 Vue生命周期;2.5 Vue生命周期;2.5 Vue生命周期;2.5 Vue生命周期;2.5 Vue生命周期;2.5 Vue生命...

    vue实例的生命周期详解

    vue生命周期

    详解Vue 实例中的生命周期钩子

    Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑、数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。 Vue 实例 在文档中...

    Vue实例中生命周期created和mounted的区别详解

    本文主要跟大家介绍了关于Vue实例中生命周期created和mounted区别的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。 生命周期先上图 什么是生命周期 Vue实例有一个完整的生命周期,...

    Vue的生命周期操作示例

    本文实例讲述了Vue的生命周期操作。分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Vue的生命周期</title> [removed]...

    对vue生命周期的深入理解

    Vue实例从创建到销毁的过程,就是生命周期。详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。 首先我们来看一下官网的生命周期图(我自己做了一点点注释):   Vue...

    Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解

    本文通过实例代码+图片描述的形式给大家介绍了Vue的实例、生命周期与Vue脚手架(vue-cli)知识,需要的朋友可以参考下

    Vue 生命周期

    Vue 实例从开始创建、初始化数据、编译模板、挂载Dom和渲染、更新和渲染、卸载等一系列过程,这是 Vue 的生命周期 vue的生命周期里边有八个生命周期钩子函数分别是 beforeCreat() 创建前 created()被创建 ...

    vue3.0生命周期的示例代码

    主要介绍了vue3.0生命周期的相关知识,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

    vue面试题(vue面试题一)

    什么是Vue? Vue是一个用于构建用户界面的渐进式JavaScript框架。...Vue实例是Vue框架中的基本概念,每个Vue应用都是通过创建一个Vue实例开始的。Vue实例包含了数据、方法、计算属性、观察属性等。

    vue组件生命周期详解

    本文实例为大家分享了vue组件生命周期的具体代码,供大家参考,具体内容如下 分为4个阶段: create/mount/update/destroy 每一个阶段都对应着有自己的处理函数 create: beforeCreate created 初始化 mount: ...

    vue生命周期实例小结

    主要介绍了vue生命周期,结合实例形式分析了vue.js生命周期相关原理、步骤、函数与操作注意事项,需要的朋友可以参考下

    jiye-ML#Vue-Study#10.03-30-实例生命周期钩子1

    比如 created 钩子可以用来在一个实例被创建之后执行代码:created: function () {也有一些其它的钩子,在实例生命周期的不同阶段被调用,

    (vue面试题)Vue.js的生命周期是什么?每个阶段的作用包括代码.txt

    Vue.js的生命周期是指一个Vue实例从创建到销毁的过程中,会经历的一系列初始化步骤和一些特定的钩子函数。这些步骤和函数可以让开发者在特定阶段运行自己的代码,比如在数据改变时更新DOM、在组件挂载之前进行一些...

    Vue组件和Route的生命周期实例详解

    Created:vue实例被生成后的一个生命周期钩子函数。(页面初始化数据加载一般写这里); beforeCreate:给个loading界面 created撤销loading; beforeDestory:你确认删除XX吗? destoryed:当前组件已被删除,清空相关...

    vue生命周期和react生命周期对比【推荐】

    个人认为,react和vue的业务逻辑是差不多,vue在react上... 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title

    浅析Vue实例以及生命周期

    给大家分享了Vue实例以及生命周期的相关知识点内容,有兴趣的朋友们可以学习下。

Global site tag (gtag.js) - Google Analytics