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 相关文章推荐
javascript 实现父窗口引用弹出窗口的值的脚本
Aug 07 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
Feb 23 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
Jan 15 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
javascript求日期差的方法
Mar 02 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
ReactNative页面跳转实例代码
Sep 27 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
angular-ui-sortable实现可拖拽排序列表
Dec 28 Javascript
vue-cli构建项目下使用微信分享功能
May 28 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
javascript实现贪吃蛇小游戏
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
php AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
php中使用接口实现工厂设计模式的代码
2012/06/17 PHP
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
jQuery 实现侧边浮动导航菜单效果
2014/12/26 Javascript
JS控制文本域只读或可写属性的方法
2016/06/24 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
基于jQuery ligerUI实现分页样式
2016/09/18 Javascript
详解ES6中的let命令
2020/04/05 Javascript
详解React中的组件通信问题
2017/07/31 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
Python实现京东秒杀功能代码
2019/05/16 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
Django Rest framework频率原理与限制
2019/07/26 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
中国制造网:Made-in-China.com
2019/10/25 全球购物
体育教育专业毕业生自荐信
2013/11/15 职场文书
学习党课思想汇报
2013/12/29 职场文书
先进集体获奖感言
2014/02/13 职场文书
《藤野先生》教学反思
2014/02/19 职场文书
党支部活动策划方案
2014/08/18 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
团拜会主持词
2015/07/04 职场文书
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server
python中的random模块和相关函数详解
2022/04/22 Python