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 相关文章推荐
拖动一个HTML元素
Dec 22 Javascript
Javascript学习笔记7 原型链的原理
Jan 11 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
Apr 21 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
Oct 23 Javascript
javascript字符串替换函数如何一次性全部替换掉
Oct 30 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
Nov 30 Javascript
浅谈 vue 中的 watcher
Dec 04 Javascript
vue better-scroll插件使用详解
Jan 25 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
vue中使用element-ui进行表单验证的实例代码
Jun 22 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
JQuery复选框全选效果如何实现
May 08 jQuery
解决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
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
PHP实现图片自动清理的方法
2015/07/08 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
JQuery 常用操作代码
2010/03/14 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
2017/01/11 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
利用node实现一个批量重命名文件的函数
2017/12/21 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
Angular网络请求的封装方法
2018/05/22 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
python进阶_浅谈面向对象进阶
2017/08/17 Python
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
详解Python3的TFTP文件传输
2018/06/26 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
陈欧广告词
2014/03/14 职场文书
高考标语大全
2014/06/05 职场文书
整改通知书
2015/04/20 职场文书
学生检讨书怎么写
2015/05/07 职场文书
田径运动会广播稿
2015/08/19 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书