vue每个阶段的生命周期做了什么

Vue 实例的生命周期可以分为创建阶段、挂载阶段、更新阶段和销毁阶段。下面是每个阶段具体干了什么的说明和对应的代码示例:

创建阶段

  1. beforeCreate
    • 此阶段在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
    • 主要用于在实例初始化之后,但是在实例准备好之前执行一些逻辑。
new Vue({beforeCreate: function () {console.log('Before create hook');}
});
  1. created
    • 在实例创建完成后被立即调用。
    • 在这一步,实例已经完成了 data 的观测和属性方法的运算,但是挂载阶段还没开始。
new Vue({created: function () {console.log('Created hook');}
});

挂载阶段

  1. beforeMount
    • 在挂载开始之前被调用。
    • 相关的render函数首次被调用。
new Vue({beforeMount: function () {console.log('Before mount hook');}
});
  1. mounted
    • 在实例被挂载到DOM后调用。
    • 如果根实例挂载到了一个文档内的元素上,当 mounted 被调用时 vm.$el 也在文档内。
new Vue({mounted: function () {console.log('Mounted hook');}
});

更新阶段

  1. beforeUpdate
    • 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
    • 可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。
new Vue({beforeUpdate: function () {console.log('Before update hook');}
});
  1. updated
    • 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
new Vue({updated: function () {console.log('Updated hook');}
});

销毁阶段

  1. beforeDestroy
    • 在实例销毁之前调用。实例仍然完全可用。
new Vue({beforeDestroy: function () {console.log('Before destroy hook');}
});
  1. destroyed
    • 在实例销毁后调用。此时,实例的所有指令都已解绑,所有的事件监听器已移除,所有的子实例也已被销毁。
new Vue({destroyed: function () {console.log('Destroyed hook');}
});

以上是Vue实例生命周期各个阶段的具体说明和对应的代码示例,希望对你有所帮助。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/166232.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring AOP 底层原理

Spring AOP 底层原理 aop 底层是采用动态代理机制实现的:接口实现类 (1)如果要代理的对象,实现了某个接口,那么 Spring AOP 会使用 JDK Proxy,去创建代理对象。 (2)没有实现接口的对…

下一代ETL工具:微服务架构的全新数据集成平台

当前对于大型企业来说数据的整合和加工变得越来越重要。随着业务需求的不断增长,企业数据量越来越大,数据管道越来越多,现有的ETL(抽取、转换、加载)工具已不再满足实时、高性能和微服务架构等现代化需求。因此&#x…

基于C#实现Prim算法

图论在数据结构中是非常有趣而复杂的,作为 Web 码农的我,在实际开发中一直没有找到它的使用场景,不像树那样的频繁使用,不过还是准备仔细的把图论全部过一遍。 一、最小生成树 图中有一个好玩的东西叫做生成树,就是用…

前端项目搭建Webpack的配置

本人这次是在搭建一个Typescript项目时候配置的Webpack。但是Typescript的项目本人看来和往常的Web(Vue)项目类似点很多的。那么我们就可以通过对该Typescript项目的略微调整即可挪到Web项目中....... 首先说明一下为什么要依赖WebPack来搭建项目??&…

ES 万条以外分页检索功能实现及注意事项

背景 以 ES 存储日志,且需要对日志进行分页检索,当数据量过大时,就面临 ES 万条以外的数据检索问题,如何利用滚动检索实现这个需求呢?本文介绍 ES 分页检索万条以外的数据实现方法及注意事项。 需求分析 用 ES 存储数…

Redis 反序列化失败

文章目录 问题原序列化配置修改配置解决方法 问题 com.fasterxml.jackson.databind.exc.MismatchedInputException: Cannot construct instance of org.springframework.security.core.authority.SimpleGrantedAuthority (although at least one Creator exists): cannot deser…

css图片缩放属性object-fit说明

object-fit 属性可以设置以下值: 属性值说明例子fill填充容器,可能会改变图片的比例。object-fit: fill;contain保持图片的原始比例,确保图片完全包含在容器内。object-fit: contain;cover保持图片的原始比例,确保图片覆盖整个容…

性能优化中使用Profiler进行页面卡顿的排查及解决方式

文章目录 一、前言二、页面卡顿的排查方式1、耗时操作的监控2、页面卡顿的监控 三、参考链接 一、前言 程序的优化在做过线上bug处理,布局层级优化,项目依赖库版本更新,重复库合并,删除未使用的资源,删除冗余的库&…

机器学习【01】相关环境的安装

学习实例 参考资料:联邦学习实战{杨强}https://book.douban.com/subject/35436587/ 项目地址:https://github.com/FederatedAI/Practicing-Federated-Learning/tree/main/chapter03_Python_image_classification 一、环境准备 GPU安装CUDA、cuDNN pytho…

ComboGrid中快捷键Enter使用

为了实现当前元素,回车时有值跳转到下一个元素,无值则查询。 定义元素时使用快捷键 $.fn.combogrid.defaults.keyHandler.up.call(this);调用combogrid默认的快捷键 $(#cs).combogrid({width: 360,placeholder: 测试...,panelWidth: 1000,qParams: {pJ…

letcode::数组中的第k个最大元素

数组中的第k个最大元素 给定整数数组 nums 和整数 k,请返回数组中第 k 个最大的元素。 请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素。 你必须设计并实现时间复杂度为 O(n) 的算法解决此问题。 示例 1: 输入: …

PHP 语法||PHP 变量

PHP 脚本在服务器上执行&#xff0c;然后将纯 HTML 结果发送回浏览器。 基本的 PHP 语法 PHP 脚本可以放在文档中的任何位置。 PHP 脚本以 <?php 开始&#xff0c;以 ?> 结束&#xff1a; <?php // PHP 代码 ?> 值得一提的是&#xff0c;通过设定php.ini的相…

nvm-切换node版本工具安装-方便好用

去官网下载&#xff1a; https://github.com/coreybutler/nvm-windows#installation--upgrades 网站进去后点击下载&#xff0c;点击那个exe文件就下载本地&#xff0c;然后双击安装 安装nvm 就直接按照窗口提示的下一步就行&#xff0c;如果改了某些地方会不成功&#xf…

数字孪生技术:提升UI交互性与个性化设计

随着数字化时代的到来&#xff0c;数字孪生技术正在逐渐改变我们的生活和工作方式。数字孪生是一种复制现实世界系统或实体的技术&#xff0c;通过创建数字模型来模拟现实世界中的各种行为和事件。这种技术不仅为人们提供了一个全新的视角来看待和解决问题&#xff0c;同时也为…

内衣专用洗衣机怎么样?口碑最好的小型洗衣机

随着人们的生活水平的提升&#xff0c;越来越多小伙伴来开始追求更高的生活水平&#xff0c;一些智能化的小家电就被发明出来&#xff0c;而且内衣洗衣机是其中一个。现在通过内衣裤感染到细菌真的是越来越多&#xff0c;所以我们对内衣裤的清洗频次会高于普通衣服&#xff0c;…

Spring Boot 3.2发布:大量Java 21的支持上线,改进可观测性

就在今天凌晨&#xff0c;Spring Boot 3.2正式发布了&#xff01;该版本是在Java 21正式发布之后的重要支持版本&#xff0c;所以在该版本中包含大量对Java 21支持的优化。 下面&#xff0c;我们分别通过Spring官方发布的博文和Josh Long长达80分钟的介绍视频&#xff0c;一起…

飞翔的鸟游戏

一.准备工作 首先创建一个新的Java项目命名为“飞翔的鸟”&#xff0c;并在src中创建一个包命名为“com.qiku.bird"&#xff0c;在这个包内分别创建4个类命名为“Bird”、“BirdGame”、“Column”、“Ground”&#xff0c;并向需要的图片素材导入到包内。 二.代码呈现 pa…

【医学图像处理】超详细!PET图像批量预处理

目录 一、单个PET图像预处理1、使用[MRIConvert](https://pan.baidu.com/s/1cn3kgeVRir8HvP6HHm0M0Q?pwd5rt5)处理DCM2、MRI和PET数据预处理过程1&#xff09; 打开matlab命令行输入spm pet&#xff0c;打开SMP12&#xff0c;界面如下2&#xff09; Realign&#xff0c;只需要…

【Vue】插值表达式

作用&#xff1a;利用表达式进行插值渲染 语法&#xff1a;{ { 表达式 } } 目录 案例一&#xff1a; 案例二&#xff1a; 案例三&#xff1a; ​编辑 注意&#xff1a; 案例一&#xff1a; <!DOCTYPE html> <html lang"en"> <head><me…