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

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。

一、什么是生命周期?
用通俗的语言来说,就是Vue中实例或者组件从创建到消灭中间经过的一系列过程。虽然不太严谨,但是也基本上可以理解。
通过一系列实践,现在把所有遇到的问题整理一遍,今天记录一下created和mounted的区别:
二、created和mounted区别?

created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。


官方图解如下:

 

我们从图中看两个节点:
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的区别,写的比较简陋,记录下来,加深印象。

 


--------------------- 

转自:https://blog.csdn.net/xdnloveme/article/details/78035065 
 

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

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

相关文章

基于java的数据结构学习——数组实现的栈以及简单应用

栈 Stack 栈是一种线性结构相比数组&#xff0c;栈对应的操作是数组的子集只能从一端添加元素&#xff0c;也只能从一端取出元素这一端称为栈顶栈是一种后进先出的数据结构 栈的应用 无处不在的Undo操作&#xff08;撤销&#xff09;括号匹配&#xff08;编译器&#xff09;程…

2013驾考科目三考试难点解析

原来规定科目三考试上车准备、起步、直线行驶等13个道路驾驶技能项目。123号令实施后&#xff0c;科目三考试分两部分。道路驾驶技能考试项目增加到16项&#xff0c;增加了加减挡位操作、路口左转弯、路口右转弯3个考试项目&#xff0c;驾驶里程也增加。如何顺利通过2013驾考科…

基于java的数据结构学习——数组实现的队列和循环队列及性能对比

队列 Queue 队列也是一种线性结构相比数组&#xff0c;队列对应的操作是数组的子集只能从一端&#xff08;队尾&#xff09;添加元素&#xff0c;只能从另一端&#xff08;队首&#xff09;取出元素队列是一种先进先出的数据结构 队列的实现及复杂度分析 Queue<E> voi…

新手如何准确的控制油门

日常练车还不赖&#xff0c;可是一换车就容易加大油门儿&#xff0c;有啥子办法能美好的扼制油呢?和调的坐位有关系吗? 答&#xff1a;油门儿跟刹车被视为交通工具扼制的魂灵。交通工具引擎发动机的油门儿&#xff0c;通常是靠踏板来扼制的&#xff0c;也称加速踏板&#xff…

vue 项目:文件夹 结构 、配置详解

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 项目配置 首先&#xff0c;在确定好使用的框架和组件库后&#xff0c;先要大致了解它们&#xff0c;做到文档基本熟悉。本次开发使用…

DIV 半透明层、 CSS实现网页 背景半透明

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 DIV半透明实现&#xff0c;使用CSS实现DIV成半透明效果&#xff0c;CSS实现层与背景半透明效果。 一、DIV CSS半透明基础介绍 - …

加速时如何换挡

加速时如何换挡&#xff0c;您知道吗?为了使换挡过程顺利进行&#xff0c;变速器内齿轮平稳啮合&#xff0c;必须掌握好发动机转速&#xff0c;在适当时机推动变速杆操纵齿轮啮合。为此&#xff0c;要通过反复练习&#xff0c;一边踩踏油门踏板&#xff0c;一边听发动机运转声…

vue 项目 引用(外部) js、css

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 我的工程结构&#xff1a; 1. 引入 css 有 2 种方式&#xff1a; 方式 1 <script type"text/javascript">import .…

自动挡车挡位的基本知识介绍

一般来说&#xff0c;自动档汽车的自动变速器的档位分为P、R、N、D、2 (或S)、L(或1)等。下面分别详细介绍如下&#xff1a; P (Parking) 停车档&#xff0c;或称泊车档&#xff1a; P用作停车之用&#xff0c;它是利用机械装置去锁紧汽车的转动部分&#xff0c;使汽车不能移动…

解决:(iptables failed: iptables --wait -t nat -A DOCKER -p tcp -d 0/0 --dport 8082 -j DNAT --to-destin

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 用 docker 部署一个前端工程&#xff0c;run 后容器有了&#xff0c;却不是运行状态&#xff0c;是创建状态&#xff0c;于是我执行 …

无损压缩——Huffman编码

最近项目中涉及到人脸关键点中神经网络的压缩&#xff0c;采用了性能较好的哈夫曼编码进行。 源码地址&#xff1a;https://github.com/believeszw/HuffmanCompress 1 引言 哈夫曼&#xff08;Huffman&#xff09;编码算法是基于二叉树构建编码压缩结构的&#xff0c;它是数据…

26条安全开车经验 开车20年老司机分享

总有些人&#xff0c;觉得自己开车技术比舒马赫牛叉&#xff0c;市区高速漂移无比潇洒。也总有些人&#xff0c;觉得路是自家的铺的&#xff0c;爱怎么开就怎么开&#xff0c;爱停哪就停哪&#xff0c;哪个不服打开车窗就是一句国骂一个中指。其实他们都没有意识到&#xff0c;…

解决:Request header field Content-Type is not allowed by Access-Control-Allow-Headers

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 前端 vue 工程 post 请求后端接口&#xff0c;报错&#xff1a; Request header field Content-Type is not allowed by Access-Con…

书写README的各种markdown语法

README 该文件用来测试和展示书写README的各种markdown语法。GitHub的markdown语法在标准的markdown语法基础上做了扩充&#xff0c;称之为GitHub Flavored Markdown。简称GFM&#xff0c;GFM在GitHub上有广泛应用&#xff0c;除了README文件外&#xff0c;issues和wiki均支持…

Apache2.4配置ssl

1》验站 如下截图&#xff0c;验站就是在DNS域名商哪里&#xff0c;在对应host下面&#xff0c;添加一个TXT记录类型&#xff0c;主机记录&#xff0c;记录值后&#xff0c;检测即可。   2》SSL证书申请 阿里云&#xff0c;腾讯云有很多免费证书申请&#xff0c;免费的缺点是…

助你解决新手开车四大问题 为您支招

新手开车起步技巧涉及方方面面&#xff0c;对于新手来说&#xff0c;如何首次将车独自开上路且不发生任何意外是众多人热切盼望的理想方式。但是新手上路难免会磕磕碰碰&#xff0c;发生小摩擦都是在所难免的&#xff0c;那么如何在起步阶段就将发生事故的概率降到最低呢?在此…

VUE - get 、post 请求后端接口:get 、post 写法 (Axios 中文说明文档地址)

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 Axios 中文使用说明文档地址&#xff1a;Axiox 中文说明文档 我只是记录下写法&#xff0c;两种请求都能正常运行&#xff1a; 1. 安装…

离合器半联动点的判断和技巧 为您支招

现在将离合器半联动的使用方法揭密如下&#xff1a;将离合器抬到车开始动时你就别再抬了&#xff0c;你如果感觉到车有些快了&#xff0c;可再往下踩些&#xff0c;你如果感觉到车有些慢了&#xff0c;可再往起抬些&#xff0c;这样可将车速控制在你想要的速度范围之内。 ● 坡…

VUE:组件间相互跳转、页面带参跳转

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 只是记录下用法&#xff1a; 从 A 页面跳转到 B 页面。 如下写法&#xff1a; A 页面跳转方式&#xff1a; 代码&#xff1a; getdat…

如何调整反光镜和座椅的位置 为您支招

【太平洋汽车网 学车频道】首先要进行座椅的高度调整&#xff0c;上下调整座椅让头部离车顶至少还有一拳的距离。如果座椅调得太高&#xff0c;车辆在颠簸时头部容易碰到车顶&#xff0c;调得太矮了又会影响视线。然后是前后距离的调整&#xff0c;当脚踩住制动踏板至最深处时…