首页 > 其他分享 >Vue的八大生命周期

Vue的八大生命周期

时间:2024-07-18 20:57:08浏览次数:15  
标签:生命周期 八大 周期 数据 methods Vue data 页面

生命周期

组件从开始创建、运行、销毁的过程中会伴随各种各样的事件,这些事件统称为生命周期

1、beforeCreate周期

创建之前:一开始就可以执行。data和methods中的数据还没有初始化,获取不到data和methods里面的数据
作用:页面重定向

2、created周期

创建之后第一个可以操作data和methods数据的生命周期,数据已经初始化。
作用:数据初始化 接口请求

3、beforeMount周期

虚拟的DOM挂载

4、Mounted周期

真实的DOM,第一个能操作DOM元素的生命周期

5、beforeUpdate周期

更新之前。可以执行0次或无数次,data中的数据是最新的,页面中的数据是旧的,还未保持同步

6、updated周期

更新之后。可以执行0次或无数次,data和页面中的数据都是最新的

7、beforeDestroy周期

销毁之前,页面还没消除,清空定时器和页面监听

8、destroyed周期

销毁之后

标签:生命周期,八大,周期,数据,methods,Vue,data,页面
From: https://blog.csdn.net/qq_59866139/article/details/140532746

相关文章

  • VUE diff 算法:为了直观展示,画了一张图来直观展示
      上图直观展示了Vue的Diff算法流程:3种方式比较根节点:图中左侧的"OldVNode"和右侧的"NewVNode"表示旧的和新的虚拟DOM根节点。箭头表示比较过程,如果根节点不同,直接替换整个节点。比较子节点:当根节点相同时,递归比较子节点。左侧"OldChild1"和"O......
  • Vue3学习---1
    Vue3学习1.初识Vue1.1HelloWorld程序<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><ti......
  • 深入理解 Vue 3 组件通信
    在Vue3中,组件通信是一个关键的概念,它允许我们在组件之间传递数据和事件。本文将介绍几种常见的Vue3组件通信方法,包括props、emits、provide和inject、事件总线以及Vuex状态管理。1.使用props和emits进行父子组件通信props传递数据props是父组件向子组件传递......
  • 深度解析 Vue 3 响应式数据
    Vue3引入了全新的响应式系统,使得数据管理更为灵活和高效。本文将详细解析Vue3响应式数据的原理和使用方法,包括reactive、ref、computed、watch等核心概念,并展示如何在实际项目中应用它们。1.响应式数据的核心概念Vue3的响应式系统基于Proxy对象,通过代理数据对象来实......
  • 杂谈:Vue 的 Diff 算法
    Vue.js使用虚拟DOM来高效地更新用户界面,其中的Diff算法是关键。Diff算法负责找出新旧虚拟DOM之间的差异,并高效地更新实际DOM。本文将详细解析Vue的Diff算法的工作原理和在实际开发中的应用。1.什么是虚拟DOM虚拟DOM是一个轻量级的JavaScript对象,用于描述DOM......
  • Vue2使用face-api.js实现人脸检测、人脸对比、人流量计数
    1、安装依赖npminstallface-api.js--save我安装的版本2、下载模型文件face-api.js需要一些预先训练好的模型文件来执行人脸检测和识别。需要从GitHub仓库中下载这些文件,并放置在项目的public目录下,或者配置一个正确的路径指向这些文件。可以从face-api.js的GitHub页面......
  • vue+element-ui根据时间查询
    查询头<el-form-itemlabel="检验时间:"prop="date"><el-date-pickerv-model="queryParams.date"type="date"placeholder="请选择"clearable......
  • 重生归来,从 996福报 到 N+1告别职场【如何封装一个支持图片和PDF在线预览的Vue组件】
    如何封装一个支持图片和PDF在线预览的Vue组件在本文中,我将介绍如何设计并实现一个Vue组件,该组件能够在线预览图片和PDF文件。我们将基于element-ui的elImageViewer组件进行改造,并使用vue-pdf插件来实现PDF预览功能。本文将详细介绍从设计思路到落地实现的全过程,完整代码在......
  • vue中实现 点击复制文本指令
    1.创建copy.js,在里面创建指令import{ElMessage}from"element-plus";exportfunctionclickCopyDirective(app){app.directive('copy',{mounted(el){el.onmousemove=()=>{el.style.cursor='point......
  • vue3中使用@作为引用根目录报错
    在Vue3中使用 @ 作为引用根目录(通常是 src 目录)报错,通常是因为配置未正确设置或者配置未被项目正确识别。1.1.排查和解决此类问题的步骤:确认配置文件:对于使用Vite的项目,需要在 vite.config.ts 文件中配置路径别名。确保你已经正确导入了 path 模块,并设置了......