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 相关文章推荐
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
jquery checkbox的相关操作总结
Oct 17 Javascript
JS中parseInt()和map()用法分析
Dec 16 Javascript
利用Angular.js编写公共提示模块的方法教程
May 28 Javascript
EasyUI在Panel上动态添加LinkButton按钮
Aug 11 Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 Javascript
详解vue axios用post提交的数据格式
Aug 07 Javascript
Javascript删除数组里的某个元素
Feb 28 Javascript
node基于async/await对mysql进行封装
Jun 20 Javascript
JavaScript中的null和undefined用法解析
Sep 30 Javascript
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
解决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开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
Bootstrap Paginator分页插件使用方法详解
2016/05/30 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
Vue+Vux项目实践完整代码
2017/11/30 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
JS实现密码框效果
2020/09/10 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
详解python发送各类邮件的主要方法
2016/12/22 Python
Python实现随机选择元素功能
2017/09/14 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
python设置表格边框的具体方法
2020/07/17 Python
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
回门宴答谢词
2014/01/13 职场文书
商务考察邀请函范文
2014/01/21 职场文书
超市重阳节活动方案
2014/02/10 职场文书
教师职称自我鉴定
2014/02/12 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
大学辅导员述职报告
2015/01/10 职场文书
工商局调档介绍信
2015/10/22 职场文书