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

vue的生命周期详解

时间:2024-03-12 21:30:17浏览次数:27  
标签:实例 生命周期 销毁 DOM 钩子 调用 Vue vue 详解

Vue 的生命周期是指 Vue 实例从创建到销毁的过程,总共分为八个阶段:创建前/后,载入前/后,更新前/后,销毁前/销毁后。每个阶段对应一个特定的钩子函数,这些钩子函数允许我们在 Vue 实例的不同状态下添加自定义代码。

以下是 Vue 的生命周期钩子函数的详细解释:

  1. beforeCreate(创建前)

在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。此时,组件的配置对象还未被创建,不能访问到 data、computed、watch、methods 上的方法和数据。
2. created(创建后)

在这个阶段已经完成数据观测等初始化工作,但是尚未挂载 DOM,$el 属性目前不可见。此时可以访问到 data、computed 属性,但不能访问到 DOM。
3. beforeMount(载入前)

在挂载开始之前被调用:相关的 render 函数首次被调用。此时虚拟 DOM 已经创建完成,即将开始渲染,但此时还没有挂载到页面上,所以无法看到渲染后的结果。
4. mounted(载入后)

el 被新创建的 vm.el替换,并挂载到实例上去之后调用该钩子。如果root实例挂载了一个in−document元素,当mounted被调用时vm.el 也在文档内。此时,组件已经挂载到页面上,可以访问到 DOM 元素。
5. beforeUpdate(更新前)

数据更新时调用,发生在虚拟 DOM 打补丁之前。可以在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。
6. updated(更新后)

由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
7. beforeDestroy(销毁前)

实例销毁之前调用。在这一步,实例仍然完全可用。此时,Vue 实例指示的所有东西仍然可用,比如属性、方法、DOM 元素等。这是进行销毁前清理工作(比如:移除事件监听器、销毁定时器、解绑全局状态等)的好时机。
8. destroyed(销毁后)

Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑,所有的事件监听器都会被移除,所有的子实例也会被销毁。此时,组件已被完全销毁,其所有的数据和事件监听器都已被移除,无法再访问。

通过合理利用这些生命周期钩子,我们可以更好地控制 Vue 组件的行为,并在不同的阶段执行特定的操作。

标签:实例,生命周期,销毁,DOM,钩子,调用,Vue,vue,详解
From: https://blog.csdn.net/Mxy18851251178/article/details/136663762

相关文章

  • 西门子S7.NET通信库【读】操作详解
    在使用西门子PLC进行工业自动化控制的过程中,经常需要与PLC进行数据交换。S7.NET是一款广泛应用于.NET平台的西门子PLC通信库,它为开发者提供了一系列的API函数,以便在C#、VB.NET等.NET语言中轻松实现与西门子PLC的数据交互。本文将详细介绍如何使用S7.NET通信库执行读操作。1......
  • 解决安装vue-cli报错
    解决安装vue-cli报错:npmERR!requesttohttps://registry.npm.taobao.org/@vue%2Fclifailed,reason:certificatehasexpired报错显示:报错原因:淘宝镜像地址(npm.taobao.org)SSL证书在2024年1月22日过期,现已经更换为npmmirror.com解决方法:以管理员身份打开命令提示......
  • 链表基础知识详解
    引言在计算机科学中,数据结构是存储、组织数据的方式。而链表,作为一种基础而强大的数据结构,因其独特的特性,在多种算法和应用场景中拥有不可替代的地位。什么是链表,为什么要使用链表链表(LinkedList)是一种线性表,但与数组不同的是,链表中的元素在内存中并不是连续放置的。每......
  • Vue3——集成mock 模拟数据生成器
    安装依赖[email protected]在vite.config.js文件中引入并配置vite-plugin-mock插件import{UserConfigExport,ConfigEnv}from'vite'import{viteMockServe}from'vite-plugin-mock'importvuefrom'@vitejs/plugin-......
  • 第143篇:手写vue-router,实现router-view
    好家伙, 今天来手写我们的老伙计vue-router, 1.替换router新开一个项目,并使用我们手写的router 2.大致结构letVue;//保存vue的构造函数classVueRouter{constructor(options){}}VueRouter.install=(_Vue)=>{Vue=_Vue;//备......
  • Tomcat安装和配置,图文详解(2024)
    Tomcat安装和配置,图文详解(2024)一、Tomcat的下载和安装二、Tomcat环境变量的配置三、Tomcat的使用一、Tomcat的下载和安装1.进入Tomcat官网链接,我们可以看到左边这里有选择版本的链接,右边是对版本的一些介绍。2,选择版本,无论是9还是10都可以,不推荐使用最新版本的Tom......
  • Vue:表单修饰符(.lazy/.number/.trim)
    一、v-model.lazy默认情况下,v-model 会在每次 input 事件后更新数据。也就是说在每次输入时都会改变绑定的值。例如,在下面的代码中,每次在输入框中输入时,number都会立即改变{{number}}<inputtype="text"v-model="number"/>有时候我们希望在一次输入结束后再......
  • 场效应管(MOSFET)如何选型?一文详解选型要点
    一、MOSFET简介场效应管(MOSFET)也叫场效应晶体管,是一种单极型的电压控制器件,不但有自关断能力,而且具备输入电阻高、噪声小、功耗低、驱动功率小、开关速度高、无二次击穿、安全工作区宽等特点,MOSFET在组合逻辑电路、放大器、电源管理、测量仪器等领域应用广泛。MOSFET按导电......
  • 【Springboot】--如何将springboot+vue项目部署到云服务器?
    目录一、准备工作1、购买云服务器2、获取面板地址二、jdk和数据库1、安装环境 2、配置jdk环境变量3、java版本的问题4、添加数据库三、前端部署 1、vue2、创建站点​编辑四、后端部署1、application.yml2、idea打包3、运行jar包4、开放端口五、可能遇到的......
  • 搭建Vue项目报yarn错误
    搭建Vue项目时(3/2)都会报一个Error:commandfailed:yarn的错误不废话直接上解决办法主要是这里出了问题,yarn不兼容当前模块,你只需要执行一句yarnconfigsetignore-enginestrue就完美解决了......