首页 > 其他分享 >Vue2.x生命周期函数

Vue2.x生命周期函数

时间:2024-02-29 19:13:19浏览次数:21  
标签:生命 Vue DOM 钩子 调用 周期函数 实例 Vue2

介绍

  Vue.js 2.x 中的生命周期函数是一系列钩子函数,它们允许你在 Vue 实例的不同阶段执行代码。这些生命周期钩子函数允许你在特定的阶段添加自定义逻辑,以便在应用程序生命周期的不同点执行操作。

创建阶段

  1) beforeCreate(创建前):在 Vue 实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。在这个阶段,实例上的属性和方法不可见。

  2) created(创建后):在 Vue 实例创建完成后立即调用,实例已经完成以下的配置:数据观测 (data observer)、属性和方法的运算、watch/event 事件回调。但是,挂载阶段还没开始,$el 属性目前不可见。

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

更新阶段

  4) mounted:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子函数。此时,组件已经被渲染到页面上。

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

  6) updated(更新后):在数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。

销毁阶段

  7) beforeDestory(销毁前):在实例销毁之前调用。在这一步,实例仍然完全可用。

  8) destoryed(销毁后):在实例销毁后调用。该钩子被调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

 

  生命周期函数提供了一个方便的方式来执行特定于应用程序阶段的逻辑。可以在这些钩子函数中执行数据初始化、异步操作、DOM 操作等。

  通过了解生命周期函数,可以更好地理解 Vue 实例在不同阶段的行为,并根据需要添加自定义逻辑。

 

标签:生命,Vue,DOM,钩子,调用,周期函数,实例,Vue2
From: https://www.cnblogs.com/warmNest-llb/p/18045158

相关文章

  • 学习之生命周期
    Servlet生命周期4.1生命周期简介什么是Servlet的生命周期应用程序中的对象不仅在空间上有层次结构的关系,在时间上也会因为处于程序运行过程中的不同阶段而表现出不同状态和不同行为——这就是对象的生命周期。简单的叙述生命周期,就是对象在容器中从开始创建到销毁的过程。......
  • 基于Vue(提供Vue2/Vue3版本)和.Net Core前后端分离、强大、跨平台的快速开发框架
    前言今天大姚给大家推荐一款基于Vue(提供Vue2/Vue3版本)和.NetCore前后端分离、开源免费(MITLicense)、强大、跨平台的快速开发框架,并且框架内置代码生成器(解决重复性工作,提高开发效率),支持移动端(iOS/Android/H5/微信小程序):Vue.NetCore。提高开发生产效率、避免996可以考虑试试这......
  • 质量保障体系的生命周期
    有同学在公众号后台留言,问了这样一个问题:搭建质量保障体系,有没有从零到十的落地步骤,比如在项目的不同阶段该侧重哪些方面?老实说,这个问题让我眼前一亮,这段时间难得的一个好问题。互联网上的技术文章大多分两种类型:一种是纯技术细节或者工具使用步骤,另一种则是高屋建瓴式的体系总......
  • 漫谈.net core和Autofac中的Scoped生命周期
      我们知道,.netcore内置了IOC容器,通常,一个服务的生命周期有三种:Transient、Scoped、Singleton  Transient:临时性的服务,当进行服务注入时,每次都是重新创建一个新的对象实例Scoped:范围性的服务,当在一个范围内进行服务注入时,保证使用同一个实例对象(可以理解为一个ISer......
  • 《细菌:我们的生命共同体》 - 书摘
    出版说明在今天三联书店的前身——生活书店、读书出版社和新知书店的出版史上,介绍新知识和新观念的图书曾占有很大比重。了解这种知识成果的内容,思考其与我们生活的关系,固然是明了社会变迁趋势的必需,但更为重要的,乃是通过知识演进的背景和过程,领悟和体会隐藏其中的理性精神和科......
  • uniapp-vue2-微信小程序,canvas 裁切图片的代码
    <canvasclass="edit-question-canvas"type="2d"id="canvasCuteImage"></canvas>/*.edit-question-canvas{position:absolute;left:-750rpx;width:690rpx;height:100rpx;}样式随便自己写*/......
  • react生命周期
    1.类组件生命周期以下是React类组件的全部生命周期方法,按照调用顺序排列:constructor(props)用途:组件的构造函数,在组件实例化时调用,用于初始化状态和绑定方法。staticgetDerivedStateFromProps(props,state)用途:在组件实例化、接收新的属性(props)或调用setState方法......
  • VMware Aria Suite Lifecycle 8.16 - 应用生命周期管理
    VMwareAriaSuiteLifecycle8.16-应用生命周期管理请访问原文链接:https://sysin.org/blog/vmware-aria-suite-lifecycle/,查看最新版。原创作品,转载请保留出处。作者主页:sysin.org应用生命周期管理VMwareAriaSuiteLifecycle(以前称为vRealizeSuiteLifecycleManage......
  • vue2项目 热更新慢解决方案
    问题1构建速度慢问题2每次保存文件,热更新卡94%AssetOptimization这一步上停顿十几秒解决方案一:npmihtml-webpack-plugin-for-multihtml--save-dev文件build/webpack.dev.conf.jsconstHtmlWebpackPlugin=require('html-webpack-plugin')替换为constHtml......
  • 【libGDX】ApplicationAdapter生命周期
    1前言​libGDX中,用户自定义的渲染窗口需要继承ApplicationAdapter类,ApplicationAdapter实现了ApplicationListener接口,但实现的方法都是空方法,方法释义如下。publicinterfaceApplicationListener{ //应用首次创建时调用一次 publicvoidcreate(); //窗口尺......