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 实现日期灵活格式化的小例子
Jul 14 Javascript
浅析JavaScript中的同名标识符优先级
Dec 06 Javascript
中止javascript执行的方法
Feb 14 Javascript
Jquery焦点与失去焦点示例应用
Jun 10 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
jquery 获取select数组与name数组长度的实现代码
Jun 20 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
angular2 ng2-file-upload上传示例代码
Aug 23 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 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+MySQL投票系统的设计和实现分享
2012/09/23 PHP
php jquery 多文件上传简单实例
2013/12/23 PHP
php获取参数的几种方法总结
2014/02/18 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
2019/10/20 PHP
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
ExtJS DOM元素操作经验分享
2013/08/28 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
2015/05/28 Javascript
Javascript 高阶函数使用介绍
2015/06/15 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
python实现外卖信息管理系统
2018/01/11 Python
python爬虫面试宝典(常见问题)
2018/03/02 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
Ray-Ban雷朋瑞典官方网站:全球领先的太阳眼镜品牌
2019/08/22 全球购物
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
5s推行计划书
2014/05/06 职场文书
幼儿教师求职信
2014/05/24 职场文书
2014副镇长民主生活会个人对照检查材料思想汇报
2014/09/30 职场文书
后天观后感
2015/06/08 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
劳动模范获奖感言
2015/07/31 职场文书
Python包argparse模块常用方法
2021/06/04 Python