老生常谈vue的生命周期

目录
  • 一、什么是生命周期
  • 二、生命周期函数
  • 三、生命周期的流程
  • 四、简单的生命周期代码
  • 总结

一、什么是生命周期

每一个组件都可能经历从创建，挂载，更新，卸载的过程。

在这个过程中的某一个阶段，用于可能会想要添加一些属于自己的逻辑代码（比如组件创建完后就请求一些服务器数据）

但是我们如何知道目前组件正在哪一个过程中，vue给我们提供了组件的生命周期函数。

二、生命周期函数

生命周期函数是一个钩子函数，在某一个时间会被vue内部源码进行回调。

通过对生命周期函数的回调，我们知道目前组件正在经历什么阶段。

那么我们就可以在该声明周期中编写属于自己的逻辑代码了。

三、生命周期的流程

四、简单的生命周期代码

使用keep-alive进行包裹组件时，可以打印出的结果为：

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • Vue3生命周期钩子函数详解

    Vue3生命周期钩子函数详解

    本文实例为大家分享了Vue3生命周期钩子函数的具体代码,供大家参考,具体内容如下 一.Vue3生命周期钩子 setup() : 开始创建组件之前,在 beforeCreate 和 created 之前执行,创建的是 data 和 methodonBeforeMount() : 组件挂载到节点上之前执行的函数:onMounted() : 组件挂载完成后执行的函数:onBeforeUpdate(): 组件更新之前执行的函数:onUpdated(): 组件更新完成之后执行的函数:onBeforeUnm

  • Vue生命周期中的八个钩子函数相机

    目录 1.beforeCreate和created函数 2.beforeMount和mounted函数 3.beforeUpdate和updated函数 4.beforeDestroy和destroyed函数 总结 1.beforeCreate和created函数 beforeCreate和created以初始化:数据监测.数据代理为分界线. 在执行beforeCreate()之前,将初始化生命周期.时间,但数据代理还没有开始. (1)beforeCreate():在初始化数据监测.数据代理之前

  • 深入了解vue2与vue3的生命周期对比

    目录 周期对比 用法 总结 周期对比 vue2 vue3 beforeCreate setup created setup beforeMount onBeforeMount mounted onMounted beforeUpdate onBeforeUpdate updated onUpdated activeted onActiveted deactiveted onDeactiveted beforeDestory onBeforeUnmount destoryed onUnmounte

  • Vue3生命周期函数和方法详解

     1. 概述 所谓生命周期函数,就是在某一条件下被自动触发的函数. 2. VUE3 生命周期函数介绍 2.1 beforeCreate 在 VUE 实例生成之前会自动执行的函数 2.2 created 在 VUE 实例生成之后会自动执行的函数 2.3 beforeMount 在组件内容被渲染到页面之前自动执行的函数 2.4 mounted 在组件内容被渲染到页面之后自动执行的函数 2.5 beforeUpdate 当data中的数据发生变化前执行的函数 2.6 updated 当data中的数据

  • vue中的生命周期及钩子函数

    vue中的生命周期及钩子函数

    目录 1.什么是生命周期 2.vue 的生命周期 3.生命周期钩子函数 1.什么是生命周期 Vue 实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载 Dom.渲染 → 更新 → 渲染.卸载等一系列过程,我们称这是 Vue 的生命周期.通俗说就是 Vue 实例从创建到销毁的过程,就是生命周期. 在 Vue 的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册 js 方法,可以让我们用自己注册的 js 方法控制整个大局,在这些事件响应方法中的 this 直接指向的

  • 浅谈vue的生命周期

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

  • 老生常谈vue的生命周期

    老生常谈vue的生命周期

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

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

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

    前面的话 Vue实例在创建时有一系列的初始化步骤,例如建立数据观察,编译模板,创建数据绑定等.在此过程中,我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑.本文将详细介绍Vue实例的生命周期 图示 下图是Vue实例生命周期的图示 解释 接下来,根据提供的生命周期钩子,对Vue实例各个阶段的情况进行详细说明 [beforeCreate] 在实例开始初始化时同步调用.此时数据观测.事件等都尚未初始化 [created] 在实例创建之后调用.此时已完成数据观测.事件方法,但尚未开始DOM编译,即

  • vue组件生命周期详解

    本文实例为大家分享了vue组件生命周期的具体代码,供大家参考,具体内容如下 分为4个阶段: create/mount/update/destroy 每一个阶段都对应着有自己的处理函数 create: beforeCreate created 初始化 mount: beforeMount mounted 和挂载相关的处理 update: beforeUpdate updated 根据要更新的数据 做逻辑判断 destroy:beforeDestroy destroyed 清理工作 代码: <!do

  • 老生常谈js-react组件生命周期

    组件的生命周期可分成三个状态: •Mounting:已插入真实 DOM •Updating:正在被重新渲染 •Unmounting:已移出真实 DOM 生命周期的方法有: •componentWillMount 在渲染前调用,在客户端也在服务端. •componentDidMount : 在第一次渲染后调用,只在客户端.之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问. 如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeou

  • Vue的生命周期操作示例

    Vue的生命周期操作示例

    本文实例讲述了Vue的生命周期操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue的生命周期</title> <script type="text/javascript" src="https://cdn.bootcss.com

  • vue组件生命周期钩子使用示例详解

    vue组件生命周期钩子使用示例详解

    目录 组件生命周期图 组件生命周期钩子 1.beforeCreate 2.created 3.beforeMount 4.mounted 5.beforeUpdate 6.updated 7.activated 8.deactivated 9.beforeDestroy 10.destroyed 11.errorCaptured 组件生命周期图 组件生命周期钩子 所有的生命周期钩子自动绑定 一.组件的生命周期:一个组件从创建到销毁的整个过程 二.生命周期钩子:在一个组件生命周期中,会有很多特殊的

  • Vue 全部生命周期组件梳理整理

    目录 前言 生命周期 created:在创建之后使用: beforeMount:挂载数据到DOM之前会调用 mounted:挂载数据到DOM之后会调用Vue作用之后的DOM 操作DOM beforeUpdate:在更新DOM之前 调用该钩子 应用:可以获取原始的DOM updated:在更新DOM之后 调用该钩子 应用:可以获取最新的DOM beforeDestroy: destroyed: activated: 用于组件激活的功能 deactivated:用于组件被停用 前言 今天继续加油学习

  • Vue 中生命周期定义及流程

    Vue 中生命周期定义及流程

    目录 一.生命周期定义 二.生命周期流程 三.总结 一.生命周期定义 生命周期:又名:生命周期回调函数.生命周期函数.生命周期钩子 生命周期是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数 3.生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的 4.生命周期函数中的 this 指向是 vm 或组件实例对象 做一个小例子,要求页面的文字一上来透明度就周而复始的从1变到0 <div id="root"> <h2 :style="{opaci

  • vue的生命周期钩子与父子组件的生命周期详解

    vue的生命周期钩子与父子组件的生命周期详解

    目录 vue的生命周期钩子的介绍 父子组件的生命周期 加载渲染过程 父组件更新过程 子组件更新过程 父子组件更新过程 销毁过程 代码示例 created和mounted的区别 vue的生命周期钩子的介绍 vue官网中提供的vue的生命周期钩子图 vue的生命周期可以分为8个阶段: 1.创建vue实例涉及的两个钩子 (1)beforeCreate:创建前,vue实例初始化之前调用. 此时的数据观察和事件配置都还没有准备好,而此时的实例中的data和el还是underfined状态,不可用的.Dom

  • Vue组件生命周期三个阶段全面总结讲解

    目录 组件生命周期 创建阶段 beforeCreate阶段 created阶段 beforeMount阶段 mounted阶段 运行阶段 beforeUpdate阶段 updated阶段 销毁阶段 beforeDestroy阶段 destroyed阶段 总结 组件生命周期 生命周期(Life Cycle)是指一个组件从 创建 -> 运行 -> 销毁 的整个阶段,强调的是一个时间段. 生命周期函数:是由 vue 框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行. 创建阶段 before

随机推荐