vue.js中created方法作用


Posted in Javascript onMarch 30, 2018

这是它的一个生命周期钩子函数,就是一个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)
}
})
// -> "a is: 1"

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

生命周期图示

下图说明了实例的生命周期。你不需要立马弄明白所有的东西,不过以后它会有帮助。

vue.js中created方法作用

补充:

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

一、什么是生命周期?

用通俗的语言来说,就是Vue中实例或者组件从创建到消灭中间经过的一系列过程。虽然不太严谨,但是也基本上可以理解。

通过一系列实践,现在把所有遇到的问题整理一遍,今天记录一下created和mounted的区别:

二、created和mounted区别?

官方图解如下:

vue.js中created方法作用

我们从图中看两个节点:

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

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

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

三、例子

<span style="font-size: 14px;">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" 
 })</span>

可以看到输出如下:

vue.js中created方法作用

可以看到都在created赋予初始值的情况下成功渲染出来了。

但是同时看console台如下:

vue.js中created方法作用

可以看到第一个报了错,实际是因为找不到id,getElementById(ID) 并没有找到元素,原因如下:

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

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

以上就是我自己总结的mounted和mounted的区别,写的比较简陋,记录下来,加深印象。

总结

以上所述是小编给大家介绍的vue.js中created方法作用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
浅析JavaScript 调试方法和技巧
Oct 22 Javascript
JSON遍历方式实例总结
Dec 07 Javascript
分享jQuery网页元素拖拽插件
Dec 01 Javascript
使用Angular缓存父页面数据的方法
Jan 03 Javascript
微信小程序 Tab页切换更新数据
Jan 05 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
Jan 12 Javascript
AngularJS上传文件的示例代码
Nov 10 Javascript
vue多层嵌套路由实例分析
Mar 19 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
Dec 09 Javascript
如何利用JavaScript编写更好的条件语句详解
Aug 10 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
微信小程序实现全局搜索代码高亮的示例
Mar 30 #Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 #Javascript
Vue实现导出excel表格功能
Mar 30 #Javascript
理解 JavaScript EventEmitter
Mar 29 #Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 #Javascript
vue的diff算法知识点总结
Mar 29 #Javascript
vue文件树组件使用详解
Mar 29 #Javascript
You might like
十天学会php之第一天
2006/10/09 PHP
PHP新手上路(十一)
2006/10/09 PHP
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
php的ZipArchive类用法实例
2014/10/20 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
侧栏跟随滚动的简单实现代码
2013/03/18 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
JavaScript惰性载入函数实例分析
2019/03/27 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
vue2.x数组劫持原理的实现
2020/04/19 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
2020/04/29 Javascript
vue3+typeScript穿梭框的实现示例
2020/12/29 Vue.js
[00:39]DOTA2上海特级锦标赛 Liquid战队宣传片
2016/03/04 DOTA
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
Anaconda下配置python+opencv+contribx的实例讲解
2018/08/06 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
幼儿园中班教师寄语
2014/04/03 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
2015年度班主任自我评价
2015/03/11 职场文书
2016公司新年问候语
2015/11/11 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
退休劳动合同怎么写?
2019/10/25 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python