Vue生命周期详解

这篇博客将会从下面四个常见的应用诠释组件的生命周期,以及各个生命周期应该干什么事

  • 单组件的生命周期
  • 父子组件的生命周期
  • 兄弟组件的生命周期
  • 宏mixin的生命周期

生命周期:Vue 实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期,各个阶段有相对应的事件钩子

1. 生命周期钩子函数

下面这张图是vue生命周期各个阶段的执行情况:

注意:

  • created阶段的ajax请求与mounted请求的区别:前者页面视图未出现,如果请求信息过多,页面会长时间处于白屏状态
  • mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染

完毕,可以用 vm.$nextTick

vue2.0之后主动调用$destroy()不会移除dom节点,作者不推荐直接destroy这种做法,如果实在需要这样用可以在这个生命周期钩子中手动移除dom节点

2. 单个组件的生命周期

现根据实际代码执行情况分析:

<template>
    <div>
        <h3>单组件</h3>
        <el-button @click="dataVar += 1">更新 {{dataVar}}</el-button>
        <el-button @click="handleDestroy">销毁</el-button>
    </div>
</template>

export default {
    data() {
        return {
            dataVar: 1
        }
    },

    beforeCreate() {
        this.compName = 'single'
        console.log(`--${this.compName}--beforeCreate`)
    },

    created() {
        console.log(`--${this.compName}--created`)
    },

    beforeMount() {
        console.log(`--${this.compName}--beforeMount`)
    },

    mounted() {
        console.log(`--${this.compName}--mounted`)
    },

    beforeUpdate() {
        console.log(`--${this.compName}--beforeUpdate`)
    },

    updated() {
        console.log(`--${this.compName}--updated`)
    },

    beforeDestroy() {
        console.log(`--${this.compName}--beforeDestroy`)
    },

    destroyed() {
        console.log(`--${this.compName}--destroyed`)
    },

    methods: {
        handleDestroy() {
            this.$destroy()
        }
    }
}

初始化组件时,打印:

当data中的值变化时,打印:

当组件销毁时,打印:

从打印结果可以看出:

  • 初始化组件时,仅执行了beforeCreate/Created/beforeMount/mounted四个钩子函数
  • 当改变data中定义的变量(响应式变量)时,会执行beforeUpdate/updated钩子函数
  • 当切换组件(当前组件未缓存)时,会执行beforeDestory/destroyed钩子函数
  • 初始化和销毁时的生命钩子函数均只会执行一次,beforeUpdate/updated可多次执行

3. 父子组件的生命周期

将单组件作为基础组件(由于props在beforeCreate()中未初始化),需要做如下更改:

props: {
    compName: {
        type: String,
        default: 'single'
    }
},

beforeCreate() {
    // this.compName = 'single'
    // console.log(`--${this.compName}--beforeCreate`)

    console.log(` --data未初始化--beforeCreate`)
},

父组件代码如下:

<template>
    <div class="complex">
        <h3>复杂组件</h3>
        <lifecycle-single compName="child"></lifecycle-single>
    </div>
</template>

const COMPONENT_NAME = 'complex'

import LifecycleSingle from './LifeCycleSingle'

export default {

    beforeCreate() {
        console.log(`--${COMPONENT_NAME}--beforeCreate`)
    },

    created() {
        console.log(`--${COMPONENT_NAME}--created`)
    },

    beforeMount() {
        console.log(`--${COMPONENT_NAME}--beforeMount`)
    },

    mounted() {
        console.log(`--${COMPONENT_NAME}--mounted`)
    },

    beforeUpdate() {
        console.log(`--${COMPONENT_NAME}--beforeUpdate`)
    },

    updated() {
        console.log(`--${COMPONENT_NAME}--updated`)
    },

    beforeDestroy() {
        console.log(`--${COMPONENT_NAME}--beforeDestroy`)
    },

    destroyed() {
        console.log(`--${COMPONENT_NAME}--destroyed`)
    },

    components: {
        LifecycleSingle
    }
}

初始化组件时,打印:

当子组件data中的值变化时,打印:

当父组件data中的值变化时,打印:

当props改变时,打印:

当子组件销毁时,打印:

当父组件销毁时,打印:

从打印结果可以看出:

  • 仅当子组件完成挂载后,父组件才会挂载
  • 当子组件完成挂载后,父组件会主动执行一次beforeUpdate/updated钩子函数(仅首次)
  • 父子组件在data变化中是分别监控的,但是在更新props中的数据是关联的(可实践)
  • 销毁父组件时,先将子组件销毁后才会销毁父组件

4. 兄弟组件的生命周期

在上面的基础上,复杂组件做如下更改

<template>
    <div class="complex">
        <h3>复杂组件</h3>
        <lifecycle-single compName="cihld1"></lifecycle-single>
        <lifecycle-single compName="child2"></lifecycle-single>
        <el-button @click="dataVar += 1">complex更新 {{dataVar}}</el-button>
        <el-button @click="handleDestroy">complex销毁</el-button>
    </div>
</template>

初始化组件时,打印:

当child1更新和销毁时,打印:

当child2更新和销毁时,打印:

当父组件销毁时,打印

从打印结果可以看出:

  • 组件的初始化(mounted之前)分开进行,挂载是从上到下依次进行
  • 当没有数据关联时,兄弟组件之间的更新和销毁是互不关联的

5. 宏mixin的生命周期

在上面的基础上,添加一个mixin.js文件,内容如下:

const COMPONENT_NAME = 'lifecycleMixin'

export default {
    name: COMPONENT_NAME,

    beforeCreate() {
        console.log(`--${COMPONENT_NAME}--beforeCreate`)
    },

    created() {
        console.log(`--${COMPONENT_NAME}--created`)
    },

    beforeMount() {
        console.log(`--${COMPONENT_NAME}--beforeMount`)
    },

    mounted() {
        console.log(`--${COMPONENT_NAME}--mounted`)
    },

    beforeUpdate() {
        console.log(`--${COMPONENT_NAME}--beforeUpdate`)
    },

    updated() {
        console.log(`--${COMPONENT_NAME}--updated`)
    },

    beforeDestroy() {
        console.log(`--${COMPONENT_NAME}--beforeDestroy`)
    },

    destroyed() {
        console.log(`--${COMPONENT_NAME}--destroyed`)
    }
}

同样的,复杂组件做如下更改:

import lifecycleMixin from './mixin'

export default {

    mixins: [lifecycleMixin],
    // ...
}

组件初始化时,打印:

组件销毁时,打印:

从打印结果可以看出:

  • mixin中的生命周期与引入该组件的生命周期是仅仅关联的,且mixin的生命周期优先执行

到此这篇关于Vue生命周期的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2022-06-22

Vue生命周期区别详解

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

详解vue生命周期

目录 为什么要理解生命周期 什么是生命周期 生命周期钩子函数 created和mounted 钩子的一些实战用法 1.异步函数 2.Vue.nextTick对异步函数的结果进行操作 总结 为什么要理解生命周期 用Vue框架,熟悉它的生命周期可以让开发更好的进行. 如果只是单纯地知道vue里面的简单语法,你是可以实现对应的一些项目和对应的想法,但是如果一旦发生问题,我们就需要借助生命周期去寻找问题,甚至说有一些需求的话,你也通过生命周期的情况来定我们该把这个东西写在哪里.所以理解vue的生命周期还

梳理一下vue中的生命周期

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

Vue js 的生命周期(看了就懂)(推荐)

用Vue框架,熟悉它的生命周期可以让开发更好的进行. 首先先看看官网的图,详细的给出了vue的生命周期: 它可以总共分为8个阶段: beforeCreate(创建前), created(创建后), beforeMount(载入前), mounted(载入后), beforeUpdate(更新前), updated(更新后), beforeDestroy(销毁前), destroyed(销毁后) 然后用一个实例的demo 来演示一下具体的效果: <div id=app>{{a}}</div

一文带你理解 Vue 中的生命周期

目录 1.beforeCreate & created 2.beforeMount & mounted 3.beforeUpdate & updated 4.beforeDestroy & destroyed 5.activated & deactivated 前言: 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如需要设置数据监听.编译模板.挂载实例到 DOM.在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户

Vue的生命周期一起来看看

目录 1.生命周期(重要) 1.1初步认识生命周期 1.2生命周期流程(8个) 1.3生命周期详细流程图 1.4常用的生命周期钩子: 1.4.1关于销毁 1.4.2关于父子组件的生命周期 1.5小案例 1.6代码举例说明生命周期钩子 总结 1. 生命周期(重要) 1.1 初步认识生命周期 别名:生命周期回调函数.生命周期函数.生命周期钩子. 生命周期是什么?Vue在关键时刻帮我们调用的一些特殊名称的函数. 生命周期函数的名字不可更改,但函数内部的具体内容由程序员自行编写 生命周期函数中的this

老生常谈vue的生命周期

目录 一.什么是生命周期 二.生命周期函数 三.生命周期的流程 四.简单的生命周期代码 总结 一.什么是生命周期 每一个组件都可能经历从创建,挂载,更新,卸载的过程. 在这个过程中的某一个阶段,用于可能会想要添加一些属于自己的逻辑代码(比如组件创建完后就请求一些服务器数据) 但是我们如何知道目前组件正在哪一个过程中,vue给我们提供了组件的生命周期函数. 二.生命周期函数 生命周期函数是一个钩子函数,在某一个时间会被vue内部源码进行回调. 通过对生命周期函数的回调,我们知道目前组件正在经历什么

一起来学习Vue的生命周期

目录 生命周期 生命周期的简单介绍 beforeCreate与created beforeCreate() created() beforeMount与mounted beforeMount() mounted()(重要) beforeUpdate与updated beforeUpdate() updated() beforeDestroy与destroyed beforeDestroy()(重要) destroyed() 总结 生命周期 生命周期的简单介绍 1.生命周期又叫做:生命周期回调函数

Vue中的生命周期介绍

什么是vue的生命周期 Vue中的生命周期是指组件从创建到销毁的一系列过程.看下面这张官方文档的图: 从图片中可以看出Vue的整个生命周期包括8个状态,按照先后顺序分别为: beforeCreate Created beforeMount mounted beforeUpdate updated beforeDestroy destroyed Vue组件的生命周期共分为三个阶段,如下图所示: 创建阶段和销毁阶段在组件的生命周期中只会执行一次,而更新阶段会执行多次. 先看一下创建阶段完成的事情:

Vue之生命周期函数详解

目录 生命周期函数 常用的生命周期的钩子 关于Vue销毁实例: 总结 生命周期函数 生命周期函数又叫:生命周期回调函数,生命周期函数. 生命周期钩子 是什么:Vue在关键时刻帮我们调用一些特殊名称的函数 生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的 生命周期函数中的this指向的是vm或者组件实例化对象 常用的生命周期的钩子 1.mounted:发送ajax请求,启动定时器,绑定自定义事件 订阅消息等功能[初始化操作] 2.beforeDestory:清除定时器,解绑自定义

浅谈vue的生命周期

目录 1.什么是生命周期?有什么作用? 2.第一次加载页面会触发哪几个钩子? 3.简述每个周期应用于哪个场景? 4.created和mounted的区别 5.vue在哪个生命周期获取数据? 总结 1.什么是生命周期?有什么作用? 每一个vue实例在创建时都要经历一系列的初始化过程-----例如需要设置监听,编译模板,将实例挂载到dom并在数据发生变化时更新dom等等.同时这个时候也会运行一些生命周期钩子的函数,这些函数,给用户在不同阶段添加代码的机会.例如:如果需要某些插件操作dom节点,如果想

对vue生命周期的深入理解

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

vue生命周期的探索

那么进入某个路由对应的组件的时候,我们会触发哪些类型的周期呢? 根实例的加载相关的生命周期(beforeCreate.created.beforeMount.mounted) 组件实例的加载相关的生命周期(beforeCreate.created.beforeMount.mounted) 全局路由勾子(router.beforeEach) 组件路由勾子(beforeRouteEnter) 组件路由勾子的next里的回调(beforeRouteEnter) 指令的周期(bind,inserted)

详解Vue生命周期的示例

一 vue的生命周期如下图所示(很清晰) 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue生命周期</title> <script src="../js/vue.js"></script> &

深入理解Vue生命周期、手动挂载及挂载子组件

本文介绍了Vue生命周期和手动挂载,分享给大家,具体如下: 1.vue的生命周期: 2.$mount()手动挂载 当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中: 假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载. 例如: 方法一: <div id="app"> {{name}} </div> <button onclick="test()">挂载</button> <scrip

vue生命周期与钩子函数简单示例

本文实例讲述了vue生命周期与钩子函数.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vue生命周期与钩子函数</title> <style> </style> <script src="https://

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

个人认为,react和vue的业务逻辑是差不多,vue在react上封装了更简洁的方法,使用起来更加的便捷,如:提供了便捷的指令(v-for,v-if,v-model),还提供了更多的属性(computed,watch),我还是比较喜欢用react的,更接近js原生,更容易于理解它. 一 vue的生命周期如下图所示(很清晰)初始化.编译.更新.销毁 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <h

浅谈Vuex注入Vue生命周期的过程

这篇文章是[前端词典]系列文章的第 13 篇文章,接下的 9 篇我会围绕着 Vue 展开,希望这 9 篇文章可以使大家加深对 Vue 的了解.当然这些文章的前提是默认你对 Vue 有一定的基础.如果一点基础都没有,建议先看官方文档. 第一篇文章我会结合 Vue 和 Vuex 的部分源码,来说明 Vuex 注入 Vue 生命周期的过程. 说到源码,其实没有想象的那么难.也和我们平时写业务代码差不多,都是方法的调用.但是源码的调用树会复杂很多. 为何使用 Vuex 使用 Vue 我们就不可避免的会遇

浅析Vue 生命周期

Vue 提供了11个钩子函数 1,从创建到销毁发生的一系列状态叫做什么周期,在这个过程中vue会提供状态函数给我们进行 该状态的操作,这个函数叫做钩子函数/生命周期函数/生命周期钩子 过程: new Vue({}) Vue 实例初始化,读取所有的生命周期函数,并没有执行,不会调用 beforeCreate() 读取属性,计算属性,添加监听 set get方法,读取watch方法 create() 可以操作数据了 判断是否有el配置,或者是被调用了 $mount() 都会走下一步 判断有没有el或

vue生命周期实例小结

本文实例分析了vue生命周期.分享给大家供大家参考,具体如下: 每个Vue实例都存在完整的生命周期,经历从创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程.如下图所示 钩子函数 vue的完整生命周期可分为三个阶段:初始化阶段.运行阶段和销毁阶段.共存在很多钩子函数,他们在vue生命周期不同的阶段进行操作,列举如下: beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy de

Vue生命周期activated之返回上一页不重新请求数据操作

activated: 英文原意:使活动.触发 在Vue的生命周期函数中,这个好像用的不是特别多?(也许只是在我的工作中这个用的不多,或者说叫几乎不用这个) 一.需求 前不久在项目中有这样一个需求: 在订单页面的地址信息栏,默认通过接口填充了一个已经设置过的一个的默认地址,现在要跳转去地址列表重新选择一个地址并回填到订单页面的地址信息位置 二.尝试 常规操作: 我们通常会将通过接口请求数据的方法放在==created== 或者 ==mounted==这两个生命周期中的一个里面调用. 但是我们知道,

浅谈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