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 27 Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 Javascript
javascript分页代码实例分享(js分页)
Dec 13 Javascript
常用jQuery代码分享
Jul 14 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
Jun 22 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
详解angular部署到iis出现404解决方案
Aug 14 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
小程序登录之支付宝授权的实现示例
Dec 13 Javascript
记一次react前端项目打包优化的方法
Mar 30 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
php,不用COM,生成excel文件
2006/10/09 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
Jquery ajaxsubmit上传图片实现代码
2010/11/04 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
2013/06/09 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
JavaScript实现同一个页面打开多张图片
2016/12/29 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
2019/02/21 Javascript
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
python连接mysql实例分享
2016/10/09 Python
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
Fanatics法国官网:美国体育电商
2019/08/27 全球购物
PHP数据运算类型都有哪些
2013/11/05 面试题
银行实习生自我鉴定范文
2013/09/19 职场文书
公司建议书怎么写
2014/05/15 职场文书
派出所所长先进事迹
2014/05/19 职场文书
2014年小学数学工作总结
2014/12/12 职场文书
财务部会计岗位职责
2015/02/03 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
领导干部学习心得体会
2016/01/23 职场文书
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python