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的操纵主体是施加编程的个人或机构,文中…

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…

git 提示 不能合并

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

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

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

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…

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数据只显示一部分…

【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相关…

【VCS】(5)Fast RTL-level Verification

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

62. 不同路径

题目链接&#xff1a;力扣 解法一&#xff1a;动态规划 定义状态&#xff1a;对于m*n的网络&#xff0c;从最后一行到右下角&#xff0c;以及从最后一列到右下角&#xff0c;都只有一条不同路径&#xff1a;一直向右或一直向下&#xff0c;所以可以定义状态&#xff1a;dp[i][…

OpenCV系列__chapter2

这里写目录标题 1 图像加减乘除位运算1.1 加法 img cv2.add(img1, img2)1.2 减法 img cv2.subtract(img1, img2)1.3 乘法 img cv2.multiply(img1, img2)1.4 除法 img cv2.divide(img1, img2)1.5 位运算 2 图像增强2.1 线性变换2.2 非线性变换 3 图像几何变换3.1 裁剪、放大…

七大排序算法和计数排序

文章目录 一、直接插入排序二、希尔排序三、直接选择排序四、堆排序五、冒泡排序六、快速排序6.1递归实现快速排序6.2非递归实现快速排序 七、归并排序7.1递归实现归并排序7.2非递归实现归并排序 八、计数排序 以下排序以从小到大排序为例 一、直接插入排序 时间复杂度&#x…

文章审核之敏感词过滤

技术选型 DFA实现原理 DFA全称为&#xff1a;Deterministic Finite Automaton,即确定有穷自动机。 存储&#xff1a;一次性的把所有的敏感词存储到了多个map中&#xff0c;就是下图表示这种结构 敏感词&#xff1a;冰毒、大麻、大坏蛋 工具类 最下面的main方法是测试用的&a…

Java版本电子招标采购系统源代码—企业战略布局下的采购寻源

智慧寻源 多策略、多场景寻源&#xff0c;多种看板让寻源过程全程可监控&#xff0c;根据不同采购场景&#xff0c;采取不同寻源策略&#xff0c; 实现采购寻源线上化管控&#xff1b;同时支持公域和私域寻源。 询价比价 全程线上询比价&#xff0c;信息公开透明&#xff0c;可…

微信小程序-地图上的图标计算旋转值朝向经纬度计算

废话不多说&#xff0c;开整 // 参数为寄件人经纬度和收件人经纬度 // 根据寄收件人经纬度弧度π进行rotate旋转计算 const getRotate (po1, po2) > {if (!(po1 && po2)) return 0const lng_a po1.longitudeconst lat_a po1.latitudeconst lng_b po2.longitud…

MySQL使用

目录 1 MySQL的登录 1.1 服务的启动和终止 1.2 自带客户端的登录与退出 2 MySQL演示使用 2.1 MySQL的使用演示 2.2 MySQL的编码设置 1 MySQL的登录 1.1 服务的启动和终止 MySQL安装完毕以后&#xff0c;需要启动服务器进程&#xff0c;不然客户端无法连接数据库。 在前面…

vue-cli项目中,使用webpack-bundle-analyzer进行模块分析,查看各个模块的体积,方便后期代码优化

一、安装 npm install --save-dev webpack-bundle-analyzer 二、在vue.config.js中配置 const BundleAnalyzerPlugin require(webpack-bundle-analyzer).BundleAnalyzerPlugin plugins: [new BundleAnalyzerPlugin({analyzerMode: server,analyzerHost: 127.0.0.1,analyze…

Word2Vec实现文本识别分类

深度学习训练营之使用Word2Vec实现文本识别分类 原文链接环境介绍前言前置工作设置GPU数据查看构建数据迭代器 Word2Vec的调用生成数据批次和迭代器模型训练初始化拆分数据集并进行训练 预测 原文链接 &#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&…