VUE中的生命周期、每个生命周期可以干什么

生命周期

就VUE来说就是一个程序的即将创建到销毁的一个过程,也就是vm对象实例从创建到最终销毁的过程。

VUE生命周期4个阶段8个钩子函数(到某一阶段自动调用的函数)

在这里插入图片描述

1.初始阶段(虚拟的DOM生成)

beforeCreate()

初始化事件对象和生命周期,这时候调用beforeCreate()调用完以后进行初始化数据代理和数据检测的创建。这时候data还没创建无法访问data中的数据。
作用:可以在这时候加一些loading效果

created()

已经完成了初始化数据代理和数据监测可以访问data中的数据。
作用:结束loading效果,也可以发哦那个网络请求,获取数据,可以在这里添加定时器。

2.挂载阶段(真实DOM的生成)

beforeMount()

在这个函数内去操作DOM元素无法不生效。

Mount()

在这个函数内去操作DOM元素可以生效。到这里页面的初次渲染就结束了。
作用:可以操作页面的DOM元素。

3.更新阶段(只有data中的数据变化了才会进入这个阶段)

beforeUpdate()

data中数据已经变化了但是页面还没有变化就会调用这个钩子函数。
作用:适合再更新之前访问现有的DOM,移除一些已经添加的事件监听器。

Update()

data中的数据变化了页面也变化了就会调用这个钩子函数。
作用:适合页面更新后,对数据做统一的处理

4.销毁阶段(只有执行this.$destroy()方法才会执行)

这里销毁是vm上绑定的数据检测数据代理之类的属性,销毁的不是vm实例,vm实例依然存在。

beforeDestroy()

其实成为解绑更为合理,解绑监视器、子组件、自定义事件监听器、事件监听器(点击事件等)、数据之前做的事情。重点就是以上的都还未解绑还存在但是已经不可用了。
作用:适合做清除定时器。

Destroy()

解绑监视器、子组件、自定义事件监听器、事件监听器(点击事件等)、数据之后做的事情

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

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

相关文章

人类机器人编程的心理机制(一)

\qquad 本文中的人类机器人编程(Human Robot Programming)意指“基于创伤的脑控(trauma-based mind control, T.B.M.C)”或“基于创伤的编程(trauma-based programming)”,文中用英文缩写“T.B.M.C”指代。T.B.M.C的操纵主体是施加编程的个人或机构,文中…

CentOS安装OpenBLAS教程

OpenBLAS 是一个基于BSD许可(开源)发行的优化 BLAS 计算库,BLAS(Basic Linear Algebra Subprograms 基础线性代数程序集)是一个应用程序接口(API)标准,用以规范发布基础线性代数操作…

【图论】二分图

二分图,即可以将图中的所有顶点分层两个点集,每个点集内部没有边 判定图为二分图的充要条件:有向连通图不含奇数环 1、染色法 可以解决二分图判断的问题 步骤与基本思路 遍历图中每一个点,若该点未被染色,则遍历该…

Unity如何快速接入iOS和GooglePlay的成就排行榜等GameCenter功能

一般在游戏开发中,经常有成就排行榜的需求,按照我们的理解,通常是要自己导入谷歌的sdk,或者苹果的sdk,然后封装后通过桥接来调用。 不用这么复杂,本鱼蛋(egostudio 防爬)告诉大家一个方法,其实…

el-table 表头设置渐变色

<el-table :data"tableData" stripe><el-table-column prop"name" label"测试" align"left"></el-table-column><el-table-column prop"code" label"测试1" align"left"></…

Sui Move与标准Move的有哪些区别和根本性创新

Sui网络将Sui Move作为其本地编程语言&#xff0c;使用Sui Move编写的apps利用Sui的共识机制&#xff0c;实现了令人印象深刻的交易性能。 然而&#xff0c;熟悉Move编程语言的开发者在探索Sui文档时可能会感到困惑&#xff0c;因为该文档着重介绍了对象和一些指令&#xff0c…

kafka消费者api和分区分配和offset消费

kafka消费者 消费者的消费方式为主动从broker拉取消息&#xff0c;由于消费者的消费速度不同&#xff0c;由broker决定消息发送速度难以适应所有消费者的能力 拉取数据的问题在于&#xff0c;消费者可能会获得空数据 消费者组工作流程 Consumer Group&#xff08;CG&#x…

刷题记:无重复字符的最长子串

● 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长子串 的长度。 输入: s “abcabcbb” 输出: 3 解释: 因为无重复字符的最长子串是 “abc”&#xff0c;所以其长度为 3。 输入: s “bbbbb” 输出: 1 解释: 因为无重复字符的最长子串是 “b”&#xff0c;所…

git 提示 不能合并

今天A分支合并B分支&#xff0c;提示“不能合并” 最终发现&#xff0c;是另一个分支的版本落后导致&#xff0c;但是git并未提示出来 有遇到这种问题可以先检查下版本

如何有效跟踪你的计费时间?

对于自由职业者、小型企业和远程团队来说&#xff0c;时间跟踪是必需的。了解自己在单个项目或任务上投入了多少时间&#xff0c;可以帮助他们有效管理资源和优化工作流程。 然而&#xff0c;在向客户收费时&#xff0c;时间跟踪多了一层复杂性&#xff1a;不仅需要跟踪所花费…

Java实现商品ID获取京东商品历史价格数据方法

要通过京东的API获取商品历史价格&#xff0c;您可以使用京东开放平台提供的接口来实现。以下是一种使用Java编程语言实现的示例&#xff0c;展示如何通过京东开放平台API获取商品历史价格&#xff1a; 首先&#xff0c;确保您已注册成为京东开放平台的开发者&#xff0c;并创…

Linux工具——vim

安装vim yum -y install vim 如果安装失败&#xff0c;提示Could not resolve host:mirrorlist.centos.org: Unkown error的问题&#xff0c;需要替换yum源&#xff0c;可以参考这个文章 配置vim root的vim配置文件在 /etc/vimrc 普通用户的vim配置文件在用户对应家目录下&a…

ElacticSearch入门

ElacticSearch 什么是Elasticsearch&#xff1f; Elasticsearch是一个基于Lucene的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎&#xff0c;基于RESTful web接口。Elasticsearch是用Java语言开发的&#xff0c;并作为Apache许可条款下的开放源码发布&#xff0c…

RabbitMQ的确认机制

RabbitMQ的确认机制 生产者确认 public class ProductionMessageConfirm {public static void Send(){ConnectionFactory factory new ConnectionFactory();factory.HostName "localhost";//RabbitMQ服务在本地运行factory.UserName "guest";//用户名…

react实现页面动态表单设计器(自定义推拽表单)

react实现页面动态表单设计器&#xff08;自定义推拽表单&#xff09; 实现效果安装插件使用组件介绍基本设置&#xff0c;可设置控件标签&#xff0c;是否必填&#xff0c;校验规则校验规则有如下几种多选&#xff0c;下拉&#xff0c;单选可动态设置每个选择的label以及值 实…

一百三十三、Hive——Hive外部表加载含有JSON格式字段的CSV文件数据

一、目标 在Hive的ODS层建外部表&#xff0c;然后加载HDFS中的CSV文件数据 注意&#xff1a;CSV文件中含有未解析的JSON格式的字段数据&#xff0c;并且JSON字段中还有逗号 二、第一次建外部表&#xff0c;直接以&#xff0c;分隔行字段&#xff0c;结果JSON数据只显示一部分…

vue3相对路径图片编译后无法显示

<img src"../assets/image/ai_content_12x.png" /> 是这么写的&#xff0c;图片用的相对路径&#xff0c;在本地不编译的话是没有问题正常。 但是编译后你就会发现在域名后一旦有路径&#xff0c;整个vue的 img js css 的加载路径都会报错。 需要在vue.config.…

【1++的C++初阶】之list

&#x1f44d;作者主页&#xff1a;进击的1 &#x1f929; 专栏链接&#xff1a;【1的C初阶】 文章目录 一&#xff0c;什么是list二&#xff0c;构造与析构2.1 结点结构2.2 链表结构2.3 迭代器结构 三&#xff0c;部分重要接口的作用及其实现3.1 迭代器相关的接口3.2 list相关…

【微信小程序】实现折叠功能,折叠不同的列表

要实现微信小程序中的折叠功能&#xff0c;可以使用wx:if或hidden属性来控制列表的显示与隐藏。同时&#xff0c;可以使用icon组件来添加指示箭头。 首先&#xff0c;在wxml文件中创建两个List列表&#xff0c;使用一个变量来控制列表的显示与隐藏&#xff1a; <view>&…

【VCS】(5)Fast RTL-level Verification

Fast RTL-level Verification General Coding GuidlinesLab --- simprofile$display() 输出彩色内容 前面的内容都是在说怎样进行仿真和验证&#xff0c;即如何使用 VCS 。 但是&#xff0c;仿真和验证是不是也有所讲究&#xff1f; 有没有一些标准来衡量设计代码和验证代码的质…