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 smipleChart 简单图标类
Jan 12 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
Mar 25 Javascript
在Ubuntu上安装最新版本的Node.js
Jul 14 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 Javascript
谈谈vue中mixin的一点理解
Dec 12 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 Javascript
Vue3 中的数据侦测的实现
Oct 09 Javascript
jquery实现购物车基本功能
Oct 25 jQuery
微信小程序网络请求实现过程解析
Nov 06 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
Apache中php.ini的设置方法
2013/02/28 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
Javascript 函数中的参数使用分析
2010/03/27 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
2016/01/31 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
TypeScript入门-接口
2017/03/30 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
JavaScript实现滚动加载更多
2020/12/27 Javascript
原生js实现自定义滚动条
2021/01/20 Javascript
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
python实现socket端口重定向示例
2014/02/10 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
python 调用钉钉机器人的方法
2019/02/20 Python
Python绘制热力图示例
2019/09/27 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
英国最大的运动营养公司之一:LA Muscle
2018/07/02 全球购物
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
六一文艺汇演主持词
2015/06/30 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技