Vue进阶(三十六):created() 详解「建议收藏」

Vue进阶(三十六):created() 详解「建议收藏」这次给大家带来vue.js中created方法的使用详解,使用vue.js中created方法的注意事项有哪些,下面就是实战案例,一起来看一下。这是它的一个生命周期钩子函数,就是一个vue实例被生成后调用这个函数。一个vue实例被生成后还要绑定到某个html元素上,之后还要进行编译,然后再插入到document中。每一个阶段都会有一个钩子函数,方便开发者在不同阶段处理不同逻辑。一般可以在creat…

大家好,又见面了,我是你们的朋友全栈君。


一、前言

vue.jscreated方法是一个生命周期钩子函数,一个vue实例被生成后会调用这个函数。一个vue实例被生成后还要绑定到某个html元素上,之后还要进行编译,然后再插入到document中。每一个阶段都会有一个钩子函数,方便开发者在不同阶段处理不同逻辑。

一般可以在created函数中调用ajax获取页面初始化所需的数据。

二、实例生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如,实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ,然后在数据变化时更新 DOM 。在这个过程中,实例也会调用一些生命周期钩子 ,这就给我们提供了执行自定义逻辑的机会。例如,created 钩子函数在实例被创建之后被调用:

var vm = new Vue({ 
   
	data: { 
   
		a: 1
	},
created: function () { 
   
	// `this` 指向 vm 实例
	console.log('a is:', this.a)
}
})

也有一些其它的钩子,在实例生命周期的不同阶段调用,如 mountedupdateddestroyed 。钩子函数中的 this 指向调用它的 Vue 实例。一些童鞋可能会问 Vue.js 是否有“控制器”的概念?答案是,没有。组件的自定义逻辑可以分布在这些钩子中。

2.1 钩子函数生命周期

在这里插入图片描述

三、Vue 生命周期 mounted 和 created 的区别

3.1 什么是生命周期?

通俗来说,生命周期就是Vue实例或者组件从创建到销毁所经历的一系列过程。虽然不太严谨,但是也基本上可以理解。

3.2 created 和 mounted 区别

官方图解如下:
在这里插入图片描述

从上图可看到两个节点:

  • created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。

  • mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对htmldom节点进行一些操作。

通常created使用的次数多,而mounted是在一些插件或组件的使用中进行操作,比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步,而如果你写入组件中,你会发现在created中无法对chart进行一些初始化配置,一定要等这个html渲染完后才可以进行,那么mounted就是不二之选。下面看一个例子(用组件)。

3.2 示例

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")/</span>/第二个命令台输出的结果<span style="font-size: 14px;"> 
   console.log(x.innerHTML); 
  } 
 }); 
 var vm = new Vue({ 
    
  el:"#example1"
 })

可以看到输出如下:
在这里插入图片描述
可以看到都在created赋予初始值的情况下成功渲染出来了。

但是同时看console台如下:
在这里插入图片描述
可以看到第一个报了错,实际是因为找不到id,getElementById(ID) 并没有找到元素,原因如下:

created的时候,视图中的html并没有渲染出来,所以此时如果直接去操作htmldom节点,一定找不到相关的元素。

而在mounted中,由于此时html已经渲染出来了,所以可以直接操作dom节点,故输出了结果。

四、拓展阅读

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/152870.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 用Pycharm 直接下载Pyinstaller,以及使用问题解决

    用Pycharm 直接下载Pyinstaller,以及使用问题解决作为一个学语言学着玩的人,肯定很想把自己的学py文件打包发给别人,Pyinstaller包满足你。因为我一般下载包都是通过Pycharm下载的,有两个方法:一:在Pycharm中你输入:importPyinstaller#会报错只需要按住alt+回车下面就会出现是否安转此包,再回车一下等待就会自动安转完成;二:在Pycharm左上角的File->Setti…

  • MongoDB和Redis的区别是什么

    MongoDB和Redis的区别是什么

  • 深度学习: ILSVRC竞赛

    深度学习: ILSVRC竞赛LargeScaleVisualRecognitionChallenge(ILSVRC):-ILSVR全称ImageNetLargeScaleVisualRecognitionCompetition举办单位ImageNet首届2010(AlexNet夺冠)终届2017(SENet夺冠)…

  • ActiveMQ

    ActiveMQ

  • 解决SecureCRTPortable和SecureFXPortable的中文乱码问题

    解决SecureCRTPortable和SecureFXPortable的中文乱码问题平时学习或者工作中,我们会发现Linux客户端SecureCRTPortable、SecureFXPortable连接Linux服务器时会出现中文乱码问题。通过修改配置可以解决这个问题。一、修改SecureCRTPortable的相关配置步骤一:【选项】→【全局选项】步骤二:【常规】→【默认会话】,点击【编辑默认设置】,点击【确定】步骤三:【外观】,把【字符编码】改成"UTF-8",点击…

  • pycharm添加搜索路径_pycharm系统找不到指定路径

    pycharm添加搜索路径_pycharm系统找不到指定路径为了能让python解释器找到我安装的python包的位置,我把该位置添加到了PYTHONPATH中,结果试了半天,pycharm中的解释器都没能检测到我那个包的存在,而在终端打开python的命令交互模式都是可以获取我在PYTHONPATH中设置的路径的。(气得我一口老血喷出来,哪位大神要是知道这是什么情况,敬请告知呀喵。感激不尽呦^_^)好了,说正事了。pycharm这么气人怎么办呢?闹了半

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号