Vue生命周期函数详解

Vue生命周期函数详解前言 相信很多前端的小伙伴们接触到了 Vue 都是先学会使用再去理解的吧 想要更好的理解 Vue 那么 Vue 的生命周期函数一定要理解 下图是我对 Vue 生命周期函数图解的详细解释 应该很通俗易懂了吧 不懂也没关系 下面我会附上代码帮助小伙伴们更好地理解 首先我们要知道 Vue 生命周期函数分为三个阶段 创建阶段运行阶段销毁阶段 1 创建阶段 创建 Vue 的实例对象 初始化 这时候该对象只有默认的一些周期函数和默认事件 其他东西还未创建 实例初始化阶段主要有两个函数 beforeCreate

生命周期是什么

生命周期(Life Cycle)的概念应用很广泛,特别是在政治、经济、环境、技术、社会等诸多领域经常出现,其基本涵义可以通俗地理解为“从摇篮到坟墓”(Cradle-to-Grave)的整个过程在Vue中实例从创建到销毁的过程就是生命周期,即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程我们可以把组件比喻成工厂里面的一条流水线,每个工人(生命周期)站在各自的岗位,当任务流转到工人身边的时候,工人就开始工作。

生命周期有哪些

生命周期整体流程

在这里插入图片描述

接下来我们从以下三个阶段进行解读生命周期:

  • 创建阶段
  • 运行阶段
  • 销毁阶段

1.创建阶段:

实例初始化阶段主要有两个函数:

  • beforeCreate()
  • created()

beforeCreate()

在这里插入图片描述
这里我们试着打印data中定义的msg和执行show方法。打开页面并查看控制台。
在这里插入图片描述

这里报错了,this.show is not a function,也就是不可使用,在beforeCreate 生命周期函数执行的时候,data和methods中的数据都没有初始化。

created()

开始编译模板

挂载模板:

开

经过开始编译模板之后就进入了挂载模板,挂载阶段也分beforeMount和mounted两个钩子函数。

beforeMount()

mounted()

2.运行阶段

运行阶段主要是两个钩子函数:

  • beforeUpdate()
  • updated()

beforeUpdate()

updated()

  • beforeDestory()
  • destoryed()
    销毁阶段的钩子函数我们了解就好了。

beforeDestroy()

destroyed()

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/177227.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月26日 下午8:00
下一篇 2026年3月26日 下午8:00


相关推荐

  • Mybatis RowBounds 分页原理「建议收藏」

    Mybatis RowBounds 分页原理「建议收藏」在mybatis中,使用RowBounds进行分页,非常方便,不需要在sql语句中写limit,即可完成分页功能。但是由于它是在sql查询出所有结果的基础上截取数据的,所以在数据量大的sql中并不适用,它更适合在返回数据结果较少的查询中使用最核心的是在mapper接口层,传参时传入RowBounds(intoffset,intlimit)对象,即可完成分页注意:由于java允许的最大整数为2147483647,所以limit能使用的最大整数也是214748…

    2025年12月9日
    6
  • linux查看nfs端口命令,LinuxNFS端口命令是什么? 爱问知识人

    linux查看nfs端口命令,LinuxNFS端口命令是什么? 爱问知识人在Linux系统中,我们也会常遇到NFS的设置。针对这方面,我们这次主要讲解一下LinuxNFS的端口配置。看看如何设置可以调节好防火墙和端口的设置。#LinuxNFS服务固定端口及防火墙配置#1。在LINUX上正常安装NFS服务2。修改/etc/service,添加以下内容(端口号必须在1024以下,且未被占用)#Localservicesmountd1011/tcp#rpc。mount…

    2022年6月27日
    52
  • 源码分析ElasticJob分片机制(带分片机制流程图)

    源码分析ElasticJob分片机制(带分片机制流程图)本文将重点分析ElasticJob的分片机制:ElasticJob分片工作机制:1、ElasticJob在启动时,首先会启动是否需要重新分片的监听器。代码见:ListenerManager#startAllListeners{…;shardingListenerManager.start();…}。2、任务执行之前需要获取分片信息,如果需要重新分片,主服务器执行分片算法,其他从…

    2025年7月3日
    5
  • 5款最强且免费的Python IDE

    5款最强且免费的Python IDE在一些问答平台,经常会遇到一类关于Python的问题:

    “学习Python,应该选择哪款开发工具?”

    2022年7月3日
    26
  • rpm 安装及更新

    rpm 安装及更新安装rpmsudorpm-ivh/Users/aaa.bbb/rpmbuild/RPMS/x86_64/worker-0.0.1-1.x86_64.rpm–force–prefix=/home/chroot/最后prefix是指定安装路径,如果不指定,就是在根目录/rpm-qa|grept-server…

    2022年6月9日
    53
  • 利用CANdb++ Editor在DBC文件中进行报文解析(详细教程)

    利用CANdb++ Editor在DBC文件中进行报文解析(详细教程)

    2020年11月8日
    2.4K

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号