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 相关文章推荐
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
Jan 29 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
Oct 25 Javascript
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
js选取多个或单个元素的实现代码(用class)
Aug 22 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
Oct 11 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
用javascript实现自动输出网页文本
Jul 30 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
解决layui 复选框等内置控件不显示的问题
Aug 14 Javascript
Vue Element校验validate的实例
Sep 21 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 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安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
jquery鼠标停止移动事件
2013/12/21 Javascript
JS实现星星评分功能实例代码(两种方法)
2016/06/09 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
JS中准确判断变量类型的方法
2020/06/01 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
Python的randrange()方法使用教程
2015/05/15 Python
python脚本设置系统时间的两种方法
2016/02/21 Python
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
python实现Floyd算法
2018/01/03 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
对python 调用类属性的方法详解
2019/07/02 Python
Mac安装python3的方法步骤
2019/08/09 Python
Python面向对象封装操作案例详解
2019/12/31 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
音乐教师个人工作总结
2015/02/06 职场文书
统计员岗位职责范本
2015/04/14 职场文书
委托收款证明
2015/06/23 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
创业项目(超低成本创业项目)
2019/08/16 职场文书