Vue生命周期区别详解

生命周期分类

vue每个组件都是独立的，每个组件都有一个属于它的生命周期，

从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。
在组件中具体的方法有:
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

beforeCreate( 创建前 )

在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods，
data， computed等上的方法和数据。

created ( 创建后 ）

实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有。 然而，挂在阶段还没有开始, $el属性目前不可见，这是一个常用的生命周期，因为你可以调用methods中的方法，改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上，，获取computed中的计算属性等等，通常我们可以在这里对实例进行预处理

beforeMount（挂载前）

挂在开始之前被调用，相关的render函数首次被调用（虚拟DOM），实例已完成以下的配置： 编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。

mounted（挂载后）

挂在完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。

beforeUpdate（更新前）

在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程

updated（更新后）

在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用

beforeDestroy（销毁前）

在实例销毁之前调用，实例仍然完全可用，
这一步还可以用this来获取实例，
一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件

destroyed（销毁后）

在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用
vue实例已经解除了事件监听以及dom的绑定，但是dom结构依然存在

执行顺序（图示）

到此这篇关于Vue生命周期区别详解的文章就介绍到这了,更多相关Vue生命周期内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

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

    在组件化的框架中,比如Angular.React或Vue,都为组件定义了生命周期这个概念,每个组件实例在被创建时都要经过一系列的初始化过程,例如:需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时,在这个过程中也会运行一些叫做生命周期钩子的函数,它们提供给用户在组件的不同阶段添加自己的代码的机会. 使用过Vue2.x的朋友肯定对它的生命周期钩子很熟悉了,因为在实际的开发过程中我们多多少少会用到他们,比如 created.mounted.destoryed等等.

  • 浅谈vue生命周期共有几个阶段？分别是什么？

    一共8个阶段 1.beforeCreate(创建前) 2.created(创建后) 3.beforeMount(载入前) 4.mounted(载入后) 5.beforeUpdate(更新前) 6.updated(更新后) 7.beforeDestroy(销毁前) 8.destroyed(销毁后) vue第一次页面加载会触发哪几个钩子函数? beforeCreate.created.beforeMount.mounted DOM 渲染在哪个周期中就已经完成? mounted 补充知识:记录一次vu

  • Vue过滤器,生命周期函数和vue-resource简单介绍

    一.过滤器 使用例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app&qu

  • Vue.js中的计算属性、监视属性与生命周期详解

    Vue.js中的计算属性、监视属性与生命周期详解

    前言 本章节咱们来说一下Vue中两个非常重要的计算属性.监视属性和生命周期,不废话直接上干货 计算属性 计算属性介绍 在模板中可以直接通过插值语法显示一些data中的数据,有些情况下我们需要对数据进行转化或者计算后显示,我们可以使用computed选项来计算,这时有些小伙伴可能就会问,我直接定义函数再调用不就行了,为什么还要整一个计算属性呢?这个问题在下边再做解释,我们先来看一下计算属性怎么用! 入门案例 需求 将人的姓和名拼接在一起 代码 <!DOCTYPE html> <html&g

  • 梳理一下vue中的生命周期

    梳理一下vue中的生命周期

    什么是生命周期? 生命周期,以个人之浅见,即一个事物从诞生到消亡的一个过程! 以人的一生来做类比,其实就可以简单粗暴的将生命周期看作人的一生,人这一出生就开始了一段美好(艰难)的旅程,一生中每个成长的阶段都会对应的去做每个阶段该做的事,比如,上幼儿园,小学,中学,高中,大学,工作(比如我就在辛苦的码字),结婚等等直到百年以后,尘归尘,土归土,这就是人的生命周期! vue也有这样的一个生命周期,也会在执行到每个阶段做一些事情,不同的是vue在每个对应的阶段是通过生命周期函数去做的,此刻再去看一下v

  • Vue父组件监听子组件生命周期

    比如有父组件 Parent 和子组件 Child,如果父组件监听到子组件挂载 mounted 就做一些逻辑处理,可以通过以下写法实现: // Parent.vue <Child @mounted="doSomething"/> // Child.vue mounted() { this.$emit("mounted"); } 以上需要手动通过 $emit 触发父组件的事件,更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可,如下所示: //

  • 对vue生命周期的深入理解

    对vue生命周期的深入理解

    一.Vue生命周期简介 官网:https://cn.vuejs.org/v2/api/#beforeCreate Vue实例从创建到销毁的过程,就是生命周期.详细来说也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程. 首先我们来看一下官网的生命周期图(我自己做了一点点注释): Vue提供给我们的钩子为上图的红色的文字 二.钩子详解 1.beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置

  • Vue组件生命周期运行原理解析

    Vue实例有一个完整的生命周期,从开始创建.初始化数据.编译模板.挂在DOM.渲染-更新-渲染.卸载等一系列过程,我们成为Vue 实例的生命周期,钩子就是在某个阶段给你一个做某些处理的机会. beforeCreate( 创建前 ) 在实例初始化之后,数据观测和事件配置之前被调用,此时组件的选项对象还未创建,el 和 data 并未初始化,因此无法访问methods, data, computed等上的方法和数据. created ( 创建后 ) 实例已经创建完成之后被调用,在这一步,实例已完成以

  • Vue生命周期区别详解

    Vue生命周期区别详解

    生命周期分类 vue每个组件都是独立的,每个组件都有一个属于它的生命周期, 从一个组件创建.数据初始化.挂载.更新.销毁,这就是一个组件所谓的生命周期. 在组件中具体的方法有: beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed beforeCreate( 创建前 ) 在实例初始化之后,数据观测和事件配置之前被调用,此时组件的选项对象还未创建,el 和 data 并未初始化,因

  • Vue生命周期函数调用详解

    Vue生命周期函数调用详解

    目录 生命周期 Vue.mixin 生命周期选项合并 调用生命周期函数 结语 生命周期 Vue为用户提供了许多生命周期钩子函数,可以让用户在组件运行的不同阶段书写自己的逻辑. 那么Vue内部到底是如何处理生命周期函数的呢?Vue的生命周期究竟是在代码运行的哪个阶段执行呢?本文将实现Vue生命周期相关代码的核心逻辑,从源码层面来理解生命周期. Vue.mixin 在介绍生命周期之前,我们先来看下Vue.mixin. Vue.mixin是Vue的全局混合器,它影响Vue创建的每一个实例,会将mixi

  • Vue生命周期示例详解

    Vue生命周期示例详解

    首先看看Vue文档里关于实例生命周期的解释图 那么下面我们来进行测试一下 <section id="app-8"> {{data}} </section> var myVue=new Vue({ el:"#app-8", data:{ data:"aaaaa", info:"nono" }, beforeCreate:function(){ console.log("创建前========&q

  • Java线程的生命周期的详解

    Java线程的生命周期的详解 对于多线程编程而言,理解线程的生命周期非常重要,本文就针对这一点进行讲解. 一.线程的状态 线程的存在有几种不同的状态,如下: New状态 Ready状态 Running状态 Dead状态 Non Runnable状态 1.New状态 New状态是线程已经被创建,但是还未开始运行的状态.此状态通过调用线程的start()方法可让线程运行. 2.Runnable状态 Runnable状态可称为准备运行状态,也可称为队列,此状态通过调用线程的start()方法可让线程运

  • Android bindService的使用与Service生命周期案例详解

    Android bindService的使用与Service生命周期案例详解

    Android中有两种主要方式使用Service,通过调用Context的startService方法或调用Context的bindService方法,本文只探讨纯bindService的使用,不涉及任何startService方法调用的情况.如果想了解startService相关的使用,请参见<Android中startService的使用及Service生命周期>. bindService启动服务的特点 相比于用startService启动的Service,bindService启动的服务

  • 微信APP生命周期及页面生命周期示例详解

    微信APP生命周期及页面生命周期示例详解

    目录 官方文档 小程序的启动流程 app生命周期 页面的生命周期 页面的生命周期(图) 官方文档 https://developers.weixin.qq.com/doc/search.html?query=生命周期&doc_type=miniprogram&jumpbackUrl=%2Fdoc%2F 小程序的启动流程 我们画一个图来表示一下,整个小程序的启动流程,我们就知道了: app生命周期 执行App()函数也就是注册一个App 1 在注册app的时候,可以判断小程序的进入场景 2

  • React DOM diff 对比Vue DOM diff 区别详解

    目录 React DOM diff 和 Vue DOM diff 的区别 React DOM diff 代码查看流程 总结 React DOM diff 和 Vue DOM diff 的区别 React 是从左向右遍历对比,Vue 是双端交叉对比. React 需要维护三个变量(我看源码发现是五个变量),Vue 则需要维护四个变量. Vue 整体效率比 React 更高,举例说明:假设有 N 个子节点,我们只是把最后子节点移到第一个,那么 React 需要进行借助 Map 进行 key 搜索找到

  • Rust指南之生命周期机制详解

    Rust指南之生命周期机制详解

    目录 前言 1.所有权中的垂悬引用解析 2.结构体中使用String 而不用&str 的原因 3.生命周期注释 4.结构体中使用字符串切片引用 5.静态生命周期 6.泛型.特性与生命周期综合使用 前言   Rust 生命周期机制是与所有权机制同等重要的资源管理机制,之所以引入这个概念主要是应对复杂类型系统中资源管理的问题.引用是对待复杂类型时必不可少的机制,毕竟在Rust 中复杂类型的数据不能被处理器轻易地复制和计算.但是为什么还有引入生命周期的概念呢,这是因为引用常常会导致非常复杂的资源管理问

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

    先讲点实际的 实用点的钩子: Created:vue实例被生成后的一个生命周期钩子函数.(页面初始化数据加载一般写这里); beforeCreate:给个loading界面 created撤销loading; beforeDestory:你确认删除XX吗? destoryed:当前组件已被删除,清空相关内容 关于Vue组件生命周期,翻译后图示: module.exports = { //props: ['父组建传的值'], data:function(){ lifecycle.push("dat

  • 两分钟让你彻底明白Android Activity生命周期的详解(图文介绍)

    两分钟让你彻底明白Android Activity生命周期的详解(图文介绍)

    大家好,今天给大家详解一下Android中Activity的生命周期,我在前面也曾经讲过这方面的内容,但是像网上大多数文章一样,基本都是翻译Android API,过于笼统,相信大家看了,会有一点点的帮助 ,但是还不能完全吃透,所以我今天特意在重新总结一下.首先看一下Android api中所提供的Activity生命周期图(不明白的,可以看完整篇文章,在回头看一下这个图,你会明白的): Activity其实是继承了ApplicationContext这个类,我们可以重写以下方法,如下代码: 复

随机推荐