首页 > 其他分享 >vue2生命周期,vue2各个方法介绍

vue2生命周期,vue2各个方法介绍

时间:2025-01-15 11:33:51浏览次数:1  
标签:生命周期 各个 dom data 渲染 vue vue2 数据

    beforeCreate:在这里加loading(页面加载的时候我想要做的事情)
    created:在这里结束loading,还可以做一些初始数据的获取


    beforeMount:载入前(已经完成了data和el数据初始化),但是页面中的内容还是vue的占位符,data中的数据是没有被挂载到dom节点中的;
                 可以在渲染数据前做最后一次更改数据(在这里更改数据不会触发其它的钩子函数),也可以在这里做初始数据的获取
    mounted:载入后,html已经渲染,把vue实例中的data里面的数据挂载到节点


    beforeUpdate:更新前(view层数据变化前,不是data中的数据改变前),重新渲染前触发,然后vue的虚拟dom机制会重新构建
                  虚拟dom树利用diff算法进行对比之后重新渲染
    updated:数据已经更新完成,dom也重新渲染完成


    beforeDestroy:你确定删除xxxxx吗(比如跳转页面,清除掉定时器等等)
    destroyed:当前组件已经被删除,清空相关内容

在父组件中注册子组件

import MyComponent from './MyComponent.vue';
export default { components: { MyComponent } };

 

标签:生命周期,各个,dom,data,渲染,vue,vue2,数据
From: https://www.cnblogs.com/qq376324789/p/18672697

相关文章

  • VUE2-表格根据方向键聚焦编辑框
    需求项目需要表格内的编辑框可以根据上下左右方向键去自动聚焦实现思路查阅网上的资料,是给表格内的每一个编辑框增加一个标识,要么类,要么是类似递增的一个id,然后监听键盘事件,但是我觉得这样不好,需要手动给每个编辑框加标识,太麻烦了。我的思路是写一个指令"keyboard-navigati......
  • pom文件的作用和其中各个属性的作用
    pom指的是projectobjectmodel(项目对象模型),pom文件是Maven项目的工作基本单元,描述了项目的所有必要信息,使Maven能自动化得构建项目,定义项目的基本信息,主要用于管理:源代码、配置文件、开发者的信息和角色、问题追踪系统、组织信息、项目授权、项目的url、项目的依赖关系等等。。......
  • 板栗看板:让供应商全生命周期管理变得如此简单
    供应商全生命周期管理(SupplierLifecycleManagement,SLM)是一个结构化、全流程的供应商闭环管理过程,旨在优化供应商关系,提高供应链的整体效率和可持续性。以下是对供应商全生命周期管理的详细阐述:一、定义供应商全生命周期管理是指企业对供应商在整个合作周期内的全面管理和维护,......
  • 基于SpringBoot框架+Vue2.x+Element-UI技术的在线博客系统设计与实现
         博主介绍:硕士研究生,专注于信息化技术领域开发与管理,会使用java、标准c/c++等开发语言,以及毕业项目实战✌    从事基于javaBS架构、CS架构、c/c++编程工作近16年,拥有近12年的管理工作经验,拥有较丰富的技术架构思想、较扎实的技术功底和资深的项目管理经验......
  • Vue2-父子组件通信
    子组件<template><div><el-form><el-form-itemlabel="码值"><el-inputv-model="code"@input="sendFather"></el-input></el-form-item><el-form-itemlabe......
  • Windows10下安装vue2.0项目所需环境
    一、Node.js版本管理器NVM安装1.下载NVM安装包        nvm全英文也叫node.jsversionmanagement,是一个nodejs的版本管理工具。nvm和n都是node.js版本管理工具,为了解决node.js各种版本存在不兼容现象可以通过它可以安装和切换不同版本的node.js。目前最新版本v1.1.12......
  • Vue2+OpenLayers调用WMTS服务初始化天地图示例
    目录一、案例截图二、安装OpenLayers库三、WMTS服务详解四、完整代码五、Gitee源码一、案例截图二、安装OpenLayers库npminstallol三、WMTS服务详解WMTS(WebMapTileService)是一种标准的网络地图服务协议,用于提供基于瓦片的地图数据。它允许客户端请求地图的具......
  • 请说说在Angular中组件和指令的生命周期挂钩是什么?
    在Angular中,组件和指令的生命周期挂钩(LifecycleHooks)是特定的事件,允许开发者在组件或指令生命周期的特定阶段执行自定义的代码逻辑。这些挂钩提供了一种机制,让开发者能够更好地控制和管理组件或指令的创建、更新和销毁过程。组件的生命周期挂钩包括:ngOnChanges:当Angular设置......
  • .NetCore依赖注入(DI)之生命周期
    在.NETCore中,依赖注入(DependencyInjection,DI)是一种实现控制反转(InversionofControl,IoC)的技术,它通过将依赖对象注入到需要它们的对象中,来实现对象之间的解耦。依赖注入的生命周期决定了对象在应用程序中的创建和管理方式。常见的生命周期有三种:Transient(瞬态)、Scoped(作用域)......
  • Vue3 hook 函数模块化 类似vue2 mixin
    1、优点代码功能模块化,复用代码2、建立新建hooks文件夹,在src下src/hooks/use功能.js3、案例a、模块化src/hooks/usepoint.jsimport{reactive,onMounted,onBeforeUnmount}from'vue';exportdefaultfunction(){letponint=reactive({x:0,......