vue created钩子函数与mounted钩子函数的用法区别


Posted in Javascript onNovember 05, 2020

1:在使用vue框架的过程中,我们经常需要给一些数据做一些初始化处理,这时候我们常用的就是在created与mounted选项中作出处理。

首先来看下官方解释,官方解释说created是在实例创建完成后呗立即调用。

在这一步,实例已完成以下配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。

这话的意思我觉得重点在于说挂架阶段还没开始,什么叫还没开始挂载,也就是说,模板还没有被渲染成html,也就是这时候通过id什么的去查找页面元素是找不到的。

下面看下实例来证明。

vue created钩子函数与mounted钩子函数的用法区别

看这个例子的结果截图如下,此错误证明找不到id为name的Dom元素。即模板还未渲染成html

vue created钩子函数与mounted钩子函数的用法区别

所以,一般creadted钩子函数主要是用来初始化数据。

2:mounted钩子函数一般是用来向后端发起请求拿到数据以后做一些业务处理。官方解释如下:

el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。

这意思是该钩子函数是在挂在完成以后也就是模板渲染完成以后才会被调用。

下面看实例

vue created钩子函数与mounted钩子函数的用法区别

下面是结果

vue created钩子函数与mounted钩子函数的用法区别

取到了值,这说明这时候vue模板已经渲染完毕。因此,Dom操作一般是在mounted钩子函数中进行的

computed:{} 计算属性,什么是计算属性呢,我个人理解就是对数据进行一定的操作,可以包含逻辑处理操作,对计算属性中的数据进行监控。计算属性是基于它的以来进行更新的,只有在相关依赖发生改变时侧能更新变化,以函数的形式返回结果。

然后可以像绑定普通属性一样在模板中绑定计算属性。

<body>
 <div id="box" :class="{a:true,b:true}">
  <div></div>
  {{msg}}
  <div>
  网址 {{msg}}的网络协议是:{{msg2}}
  </div>
 </div>
  <script type="text/javascript">
  window.οnlοad=function(){
  new Vue({
   el:"#box",
   data:{
   msg:"https://www.baidu.com"
   },
   computed:{
   msg2:function(){
    var s=this.msg.split(":")[0];
    return s;
   }
   }
  })
  }
 </script>
 </body>

补充知识:vue请求数据放在created好还是mounted里好

建议放在created里

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

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

如果在mounted钩子函数中请求数据可能导致页面闪屏问题

其实就是加载时机问题,放在created里会比mounted触发早一点,如果在页面挂载完之前请求完成的话就不会看到闪屏了

以上这篇vue created钩子函数与mounted钩子函数的用法区别就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
js 采用delete实现继承示例代码
May 20 Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
深入理解JavaScript单体内置对象
Jun 06 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
jQuery图片轮播实现并封装(一)
Dec 03 Javascript
js实现炫酷的左右轮播图
Jan 18 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 Javascript
vue cli 全面解析
Feb 28 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 Javascript
绘制微信小程序验证码功能的实例代码
Jan 05 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 #Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 #Javascript
如何利用vue实现波谱拟合详解
Nov 05 #Javascript
关于Vue中$refs的探索浅析
Nov 05 #Javascript
JavaScript 实现轮播图特效的示例
Nov 05 #Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
Nov 05 #Javascript
nuxt 每个页面head标签内容设置方式
Nov 05 #Javascript
You might like
如何使用PHP获取网络上文件
2006/10/09 PHP
codeigniter中测试通过的分页类示例
2014/04/17 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
jquery cookie插件代码类
2009/05/26 Javascript
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
JS中操作JSON总结
2020/12/06 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
Augularjs-起步详解
2016/07/08 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
2016/08/16 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
2017/12/18 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
浅谈js闭包理解
2019/04/01 Javascript
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
python中zip()方法应用实例分析
2016/04/16 Python
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
Python for循环生成列表的实例
2018/06/15 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
详解python做UI界面的方法
2019/02/27 Python
关于Python作用域自学总结
2019/06/10 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
体育教师求职信
2014/05/24 职场文书
施工质量承诺书范文
2014/05/30 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书
计划生育目标责任书
2015/05/09 职场文书
公司考勤管理制度
2015/08/04 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书