首页 > 其他分享 >vue生命周期

vue生命周期

时间:2024-05-24 20:30:27浏览次数:14  
标签:生命周期 methods DOM dom vm vue 页面

生命周期就是vue创建dom流程中可调用的函数,共有八个:
1、beforeCreate:此时无法通过vm访问到data中的数据、methods中的方法;
2、created:可以通过vm访问到data中的数据、methods中配置的方法;
3、生成虚拟dom;
4、beforeMount:页面呈现的是未经Vue编译的DOM结构,所有对DOM的操作,最终都不奏效。(简单说就是还没有搞成真实的dom,vue编译真实dom时用的是已经存在的虚拟dom,你改了也不会用你改过的dom生成)
5、mounted:页面中呈现的是经过Vue编译的DOM,对DOM的操作均有效(真实dom已经生成写入界面了,可以进行异步操作,但是最好不要去改dom);
6、挂载完毕;
7、beforeUpdate:数据是新的,但页面是旧的,即:页面尚未和数据保持同步;
8、updated:数据和页面都是新的;
9、beforDestory:vm中所有的: data、methods、指令等等,都处于可用状态,马上要执行销毁过程,一般在此阶段:关闭定时器、取消订阅消息、解绑自定义事件等收尾操作;
10、destoryed:happy end;

标签:生命周期,methods,DOM,dom,vm,vue,页面
From: https://www.cnblogs.com/xjZhang/p/18211454

相关文章

  • Spring Bean生命周期的“验证之旅”
    1.引言在Spring框架中,Bean的生命周期是一个复杂且精心设计的过程,涉及Bean的创建、配置、初始化、使用以及销毁等多个阶段。而“验证”则是这一生命周期中至关重要的环节,它确保了Bean在使用前已经正确地完成了所有的配置和初始化步骤。深入理解SpringBean生命周期的验证过......
  • 业务问题:vue部署后前端404
    后端部署人员没搞明白哈希history问题,在部署Vue项目时可能遇到的404错误问题,尤其是在使用history模式时。文章解释了这是因为Vue是单页应用(SPA),所有路由都是由前端处理的,而服务器无法识别这些路由。因此,刷新页面时会导致404错误。解决方案是在服务器配置中使用try_files......
  • Vue 3 组件基础与模板语法详解
    title:Vue3组件基础与模板语法详解date:2024/5/2416:31:13updated:2024/5/2416:31:13categories:前端开发tags:Vue3特性CompositionAPITeleportSuspenseVue3安装组件基础模板语法Vue3简介1.Vue3的新特性Vue3引入了许多新的特性,以提高框架的性......
  • vue---复制功能
    在做VUE开发前台用户的时候,对于订单编号,合同编号,增加一个一键复制的功能,往往能够极大的提升用户体验。第一步:安装v-clipboard#使用npm安装:npminstall--savev-clipboard#使用yarn安装yarnaddv-clipboard第二步:全局引入main.jsimportVuefrom'vue'importClipb......
  • vue + websocket + speak-tts 实现推送的告警消息弹框显示在右下角并语音播报出内容
    最近接了个项目需求,给设备配置语音加弹框告警。用户登录项目后不管在哪个页面,有告警就全局在右下角消息弹框加语音播报,下面浅介绍下我在开发中的流程以及遇到的坑!!!1、首先项目中安装speak-tts语音播报插件。npminstallspeak-tts2、创建一个全局的speech.js文件,文件中引入插......
  • Vue面试不得不会的20个题——第三篇
    13.Vue中的混入(Mixins)是什么?Vue中的混入(Mixins)是一种分发Vue组件中可复用功能的非常灵活的方式。混入对象是一个包含组件选项的对象,可以包含data、components、created、methods、computed、watch等等。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。......
  • Vue 3 中如何使用全局 API?
    在Vue3中,全局API的使用方式相比Vue2有所变化,主要是由于Vue3引入了CompositionAPI和对Tree-Shaking的优化。以下是一些在Vue3中使用全局API的常见方法:1.创建Vue应用实例在Vue3中,你需要使用createApp方法来创建一个新的Vue应用实例。这是所......
  • Django+Vue前后端分离的原理
    Django+Vue创建项目并实现前后端分离的原理,主要涉及两个主要部分:Django作为后端框架,负责处理业务逻辑和数据;Vue作为前端框架,负责构建用户界面和与后端进行通信。以下是对这一原理的详细讲解:前后端分离的概念:前后端分离是一种软件架构模式,它将应用程序的前端(用户界面)和后端(数......
  • 社区医院|基于SprinBoot+vue的社区医院管理服务系统(源码+数据库+文档)
    社区医院管理服务系统目录基于SprinBoot+vue的社区医院管理服务系统一、前言二、系统设计三、系统功能设计 1系统功能模块2管理员功能模块3用户功能模块4医生功能模块四、数据库设计 五、核心代码 六、论文参考七、最新计算机毕设选题推荐八、源码获取:博......
  • 家政服务|基于SprinBoot+vue的家政服务管理平台(源码+数据库+文档)
    家政服务管理平台目录基于SprinBoot+vue的家政服务管理平台一、前言二、系统设计三、系统功能设计 1前台模块设计2后台功能模块5.2.1管理员功能模块5.2.2用户功能模块5.2.3服务人员功能模块四、数据库设计 五、核心代码 六、论文参考七、最新计算机毕设选题推......