Vue生命周期中mounted和created的区别

一、什么是生命周期?
用通俗的语言来说,就是Vue中实例或者组件从创建到消灭中间经过的一系列过程。虽然不太严谨,但是也基本上可以理解。
通过一系列实践,现在把所有遇到的问题整理一遍,今天记录一下created和mounted的区别:
二、created和mounted区别?
官方图解如下:
在这里插入图片描述
我们从图中看两个节点:
created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
其实两者比较好理解,通常created使用的次数多,而mounted通常是在一些插件的使用或者组件的使用中进行操作,比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步,而如果你写入组件中,你会发现在created中无法对chart进行一些初始化配置,一定要等这个html渲染完后才可以进行,那么mounted就是不二之选。下面看一个例子(用组件)。
三、例子

Vue.component("demo1",{data:function(){return {name:"",age:"",city:""}},template:"<ul><li id='name'>{{name}}</li><li>{{age}}</li><li>{{city}}</li></ul>",created:function(){this.name="唐浩益"this.age = "12"this.city ="杭州"var x = document.getElementById("name")//第一个命令台错误console.log(x.innerHTML);},mounted:function(){var x = document.getElementById("name")//第二个命令台输出的结果console.log(x.innerHTML);}});var vm = new Vue({el:"#example1"})

可以看到输出如下:
在这里插入图片描述
可以看到都在created赋予初始值的情况下成功渲染出来了。
但是同时看console台如下:
在这里插入图片描述
可以看到第一个报了错,实际是因为找不到id,getElementById(ID) 并没有找到元素,原因如下:
在created的时候,视图中的html并没有渲染出来,所以此时如果直接去操作html的dom节点,一定找不到相关的元素
而在mounted中,由于此时html已经渲染出来了,所以可以直接操作dom节点,故输出了结果“唐浩益”。
以上就是我自己总结的mounted和mounted的区别

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

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

相关文章

高并发库存秒杀场景,阿里巴巴数据库是这样应对的

简单库存场景的数据库实现 一般来说&#xff0c;从数据库层面讲&#xff0c;库存业务会分为两步&#xff0c;第一步是插入一条记录到扣减明细表inventory_detail&#xff0c;第二步是对库存扣减表inventory的一条记录进行扣减&#xff0c;这两步往往是在一个事务中实现的。 数…

国产数据库存储引擎X-Engine的科研之路

X-Engine是阿里云RDS MySQL 的存储引擎之一&#xff0c;基于Log-structured Merge Tree (LSM-tree)&#xff0c;较基于 B-tree 一族的其它存储引擎而言年轻很多&#xff0c;所以在实践中遇到问题也更多&#xff0c;对研究的需求也更大。 LSM-tree是1996 年美国计算机科学家 Pa…

Vue刷新当前页面几种方式

问题: 最近些日子项目中突然碰到了一个需求&#xff0c;再完成编辑操作之后需要进行页面刷新&#xff0c;通过实验有如下几种姿势可以解决需求中的问题&#xff0c;下面进行简单总结如下。 姿势一&#xff1a;this.$router.go(0) 这个姿势是利用了 history 中前进和后退的功能&…

【我想进大厂】Redis夺命连环11问

来源 | 科技缪缪责编 | Jerry说说Redis基本数据类型有哪些吧字符串&#xff1a;redis没有直接使用C语言传统的字符串表示&#xff0c;而是自己实现的叫做简单动态字符串SDS的抽象类型。C语言的字符串不记录自身的长度信息&#xff0c;而SDS则保存了长度信息&#xff0c;这样将获…

因“智”而治,数据库自动驾驶时代大门即将开启!

数据库自治服务DAS即将重磅发布 点我立即预约直播DAS精彩详情 因“智”而治&#xff0c;数据库即将迈入自动驾驶时代4月22日 15:00 — 16:30 期待与你一同见证精彩蜕变 随着云计算的普及&#xff0c;数据库从传统以软件呈现的DBMS走向以服务呈现的云数据库&#xff0c;解决了开…

史上最强《Java 开发手册》泰山版王者归来!

阿里妹导读&#xff1a;潜力修炼一年之久的《Java 开发手册&#xff08;泰山版&#xff09;》今天发布&#xff01;此次共计新增 34 条规约&#xff0c;修改描述 90 处&#xff0c;其中错误码规则更是第一次提出完整的解决方案&#xff0c;大家参考错误码示例表&#xff0c;欢迎…

Java 最高均薪 19015 元! 8 月程序员工资出炉,你拖后腿了吗?

在全员争当码农的时代&#xff0c;如果你也想学一门编程语言&#xff0c;那么&#xff0c;我要告诉你&#xff0c;Java 是编程语言中不可撼动的王者。有点难理解&#xff1f;先看个排行榜???? 来自权威开发语言排行榜 TIOBE 的数据&#xff08;截止到 2020 年 4 月&#x…

从事前到事后,云数据库 Redis MongoDB 安全体系全揭秘!

作者&#xff1a;陈金元&#xff08;今远&#xff09;&#xff0c;阿里云管控技术专家 一、整体说明 上图是云数据库Redis&MongoDB的安全体系图&#xff0c;横向是实例控制链路&#xff0c;纵向是实例数据链路&#xff0c;对于控制链路&#xff0c;事前为了避免恶意操作或…

TeaDSL:支持任意 OpenAPI 网关的多语言 SDK 方案

正在上传…重新上传取消 导读 在以云计算为主角的开发者视界中&#xff0c;OpenAPI 是绝对的主角。要发短信&#xff0c;用 OpenAPI&#xff1b;要管理资源&#xff0c;用 OpenAPI&#xff1b;要管理权限&#xff0c;用 OpenAPI。如果一个 OpenAPI 解决不了你的问题&#xff…

Vue如何循环提取对象数组中的值

数据如下&#xff0c;提取name和callcount 第一种&#xff1a; getQueryCallStatistics("sesp1", this.provinceId).then((res) > {let arr [];let arr1 [];let arr2 [];let arr3 [];let arr4 [];this.xunshiMap res.data.callstatistics;res.data.callst…

Node.js 从门详解 (二)

目录1. 模块化的基本概念1.1 什么是模块化1.2 模块化规范2. Node.js 中模块化2.1 Node.js 中模块的分类2.2 加载模块2.3 Node.js中的模块作用域2.3.1 什么是模块作用域2.3.2 模块作用域的好处2.4 对外共享模块作用域中的成员2.4.1 module对象2.4.2 module.exports对象2.4.3 共享…

分享实录 | 阿里巴巴测试环境管理实践概述

正在上传…重新上传取消 【以下为分享实录&#xff0c;有删节】 测试环境管理之困 正在上传…重新上传取消 互联网产品的服务通常是由 Web 应用、中间件、数据库和许多后台业务程序组成&#xff0c;一套运行环境就是一个自成一体的小生态。部署软件产品的正式发布版本&#…

高校毕业生:今年“太惨了”,网友:更惨的可能还在后头!

受疫情影响&#xff0c;今年的就业形势基本上没跑了&#xff1a;“各行各业&#xff0c;大小企业&#xff0c;全面缩招&#xff01;”据国家统计局7月份的最新数据显示&#xff1a;20-24岁大专及以上人员&#xff08;主要为新毕业大学生&#xff09;失业率比去年同期高 3.3 个百…

uniapp利用腾讯地图接口获取当前定位城市及计算两经纬度的实际距离

文章目录一、注册腾讯地图1. 申请开发者密钥&#xff08;key&#xff09;2. 开通webserviceAPI服务3. 下载SDK二、导入SDK2.1. 解压复制2.2. 页面导入三、实现3.1. 先创建实例。3.2. 获取经纬度3.3. 监控四、计算二点距离4.1. 官网地址4.2. 代码4.3. 测试一、注册腾讯地图 1. …

Gartner 企业级网络设备市场份额报告:阿里云负载均衡增速全球第一

4月8日&#xff0c;Gartner发布最新的全球企业级网络设备市场份额报告&#xff0c;阿里云负载均衡&#xff08;SLB&#xff09;增速全球第一&#xff0c;单季度营收环比增长35.1%&#xff0c;远超欧美传统厂商或是云服务厂商。 负载均衡被誉为IT系统的流量管家&#xff0c;它可…

放弃 Windows 后 ,开源操作系统能成为主流桌面系统吗?

来源 | CSDN责编 | 郑丽媛头图 | CSDN下载自东方IC在近十几年里&#xff0c;总是能听到世界各地的国家或者地方政府在尝试用开源系统代替Windows作为政府办公系统&#xff0c;尤其在今年微软正式宣布停止对Windows 7的更新维护服务后&#xff0c;很多数年来一直使用的Windows 7…

Sentinel 1.7.2 发布,完善开源生态及扩展性

Sentinel 1.7.2 正式发布&#xff0c;带来了 Logger SPI 扩展机制、Zuul 2.x 网关流控、SOFARPC 适配等多项特性和改进。下面我们来一起探索一下 Sentinel 1.7.2 的重要特性。 多样化的适配模块 到目前为止&#xff0c;Sentinel 已覆盖微服务、API Gateway 和 Service Mesh 三…

微信开发者工具:Failed to load font ************** net::ERR_CONNECTION_RESET问题解决办法

如果微信开发者工具前几天用的好好的突然出现 VM541:1 Failed to load font https://img.yzcdn.cn/vant/vant-icon-d3825a.ttf net::ERR_CONNECTION_RESET 这个错误说明。可能原因是微信开发者工具发布了新版本&#xff0c;你需要更新一下开发工具的版本&#xff0c;就能解决这…

从 DevOps 到 NoOps,Serverless 技术的落地方式探讨

Serverless 技术正以一种全新的方式&#xff0c;帮助云上客户进一步节省云的使用成本&#xff0c;实践 NoOps 理念&#xff0c;同时&#xff0c;他也正深刻变革着开发者们的编程模式&#xff0c;所谓“Write locally, compile to the cloud”。 本文将介绍 Serverless 技术来降…

uni-app中使用腾讯位置服务实现小程序地图选点功能

文章目录1. 官方文档2. 小程序添加插件3. HBuilder配置4. 配置代码5. 页面代码1. 官方文档 技术选定&#xff08;地图选点插件&#xff09; &#xff08;对应官网&#xff1a;https://lbs.qq.com/miniProgram/plugin/pluginGuide/locationPicker &#xff09; 2. 小程序添加…