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 相关文章推荐
清除网页历史记录,屏蔽后退按钮!
Dec 22 Javascript
基于jquery的direction图片渐变动画效果
May 24 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
设置jquery UI 控件的大小方法
Dec 12 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
angular4 JavaScript内存溢出问题
Mar 06 Javascript
js canvas实现红包照片效果
Aug 21 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 Javascript
js实现右键弹出自定义菜单
Sep 08 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
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
PDO::quote讲解
2019/01/29 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
2013/07/17 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
Javascript核心读书有感之词法结构
2015/02/01 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
2015/07/27 Javascript
详解JS面向对象编程
2016/01/24 Javascript
将JSON字符串转换成Map对象的方法
2016/11/30 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
Python netmiko模块的使用
2020/02/14 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
python 获取字典键值对的实现
2020/11/12 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
美国Curacao百货连锁店网站:iCuracao.com
2019/07/20 全球购物
美国购物网站:Clickhere2shop
2021/01/28 全球购物
执行力心得体会
2013/12/31 职场文书
演讲稿的写法
2014/05/19 职场文书
优秀英文求职信范文
2015/03/19 职场文书
工厂门卫岗位职责
2015/04/13 职场文书
个人售房合同协议书
2016/03/21 职场文书
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript