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)


相关推荐

  • 超详细的MySQL三万字总结[通俗易懂]

    超详细的MySQL三万字总结[通俗易懂]文章目录MySQL基础数据库的介绍数据库概述数据的存储方式数据库的概念常见数据库排行榜数据库的安装与卸载数据库的安装数据库的卸载数据库服务的启动与登录Windows服务方式启动DOS命令方式启动控制台连接数据库SQLyog图形化工具——客户端使用SQLyog登录数据库数据库管理系统数据库管理系统、数据库和表的关系SQL的概念什么是SQLSQL作用SQL语句分类MySQL的语法DDL操作数据库创建数据库创建数据库的几种方式查看数据库修改数据库删除数据库使用数据库DDL操作表结构创建表M

  • LeetCode[5]-最长回文子串_回纹什么意思

    LeetCode[5]-最长回文子串_回纹什么意思给你一个字符串 s,请你将 s 分割成一些子串,使每个子串都是 回文串 。返回 s 所有可能的分割方案。回文串 是正着读和反着读都一样的字符串。示例 1:输入:s = “aab”输出:[[“a”,”a”,”b”],[“aa”,”b”]]示例 2:输入:s = “a”输出:[[“a”]] 提示:1 <= s.length <= 16s 仅由小写英文字母组成题解暴搜class Solution {public: vector<vector<st

  • Windows环境下搭建SVN服务器

    Windows环境下搭建SVN服务器如要转载,请注明来源,小石头的博客: http://blog.csdn.net/lu1024188315使用 VisualSVNServer来实现主要的 SVN功能则要比使用原始的 SVN和Apache相配合来实现源代码的 SVN管理简单的多,下面就看看详细的说明。VisualSVNServer的下载地址如下,是免费的,随意不必有顾虑http://www.visua

  • 实例说明optimize table在优化MySQL时很重要

    实例说明optimize table在优化MySQL时很重要

  • mysql 字符串拼接的几种方式_mysql拼接字符串和字段

    mysql 字符串拼接的几种方式_mysql拼接字符串和字段第一种:MySQL自带语法Concat(string1,string2,string3…),此处是直接把string1和string2等等的字符串拼接起来(无缝拼接哦)说明:此方法在拼接的时候如果有一个值为NULL,则返回NULLselectconcat(“aaa”,”bbbb”,”ccccc”)asstrselectconcat(“aaa”,”bbbb”,null)asstr第二种:第二种也是mysql自带语法CONCAT_WS(separator.

  • GG修改器免root下载安装最新_安卓修改器免root版本

    GG修改器免root下载安装最新_安卓修改器免root版本gg修改器免root下载gg修改器官方网址https://gameguardian.net/官网服务器在国外访问速度有点慢,而且页面是英文,有时甚至打不开推荐中文网站,里面有最新的gg修改器下载,脚本分享,gg修改器教程,框架下载等等直达链接:竹子学习网gg修改器全名GameGuardian,是歪果仁开发的一款内存修改软件,所以可以修改有关游戏内存数据达到破坏游戏平衡的目的。被称为手游…

发表回复

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

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