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 相关文章推荐
jQuery的attr与prop使用介绍
Oct 10 Javascript
详解JavaScript中的异常处理方法
Jun 16 Javascript
JavaScript淡入淡出渐变简单实例
Aug 06 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
javascript 跨域问题以及解决办法
Jul 17 Javascript
vue 简单自动补全的输入框的示例
Mar 12 Javascript
vue+iview+less 实现换肤功能
Aug 17 Javascript
vue+element UI实现树形表格带复选框的示例代码
Apr 16 Javascript
vue.js 2.0实现简单分页效果
Jul 29 Javascript
layui清空,重置表单数据的实例
Sep 12 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
Jul 28 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
再说下636单管机
2021/03/02 无线电
PHP $_SERVER详解
2009/01/16 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
div层的移动及性能优化
2010/11/16 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
JQuery 设置checkbox值二次无效的解决方法
2016/07/22 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
js实现随机点名小功能
2017/08/17 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
js实现电灯开关效果
2021/01/19 Javascript
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
深入理解Python中变量赋值的问题
2017/01/12 Python
详解python基础之while循环及if判断
2017/08/24 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
技术比武方案
2014/05/19 职场文书
个人担保书范文
2014/05/20 职场文书
国庆节慰问信
2015/02/15 职场文书
总结高并发下Nginx性能如何优化
2021/11/01 Servers
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle