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 相关文章推荐
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
浅谈JavaScript 框架分类
Nov 10 Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 Javascript
jquery模拟alert的弹窗插件
Jul 31 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
Vue渲染函数详解
Sep 15 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
Nov 05 Javascript
JS实现关闭小广告特效
Jan 29 Javascript
微信小程序实现全局搜索代码高亮的示例
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
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
一个ubbcode的函数,速度很快.
2006/10/09 PHP
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
JavaScript中CreateTextFile函数
2020/08/30 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
CSS3弹性盒模型开发笔记(三)
2016/04/26 HTML / CSS
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
资深生产主管自我评价
2013/09/22 职场文书
党员培训思想汇报
2014/01/07 职场文书
采购求职信
2014/03/17 职场文书
机电一体化专业求职信
2014/07/22 职场文书
党员自我对照检查材料
2014/08/19 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书
创业计划之特色精品店
2019/08/12 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js
oracle delete误删除表数据后如何恢复
2022/06/28 Oracle