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 相关文章推荐
读jQuery之八 包装事件对象
Jun 21 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
jquery的ajax简单结构示例代码
Feb 17 Javascript
js点击选择文本的方法
Feb 09 Javascript
javascript创建函数的20种方式汇总
Jun 23 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
vue 表单输入格式化中文输入法异常问题
May 30 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 Javascript
详解vue中v-on事件监听指令的基本用法
Jul 22 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配置文件中最常用四个ini函数
2007/03/19 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
Yii使用技巧大汇总
2015/12/29 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
php 可变函数使用小结
2018/06/12 PHP
prototype 源码中文说明之 prototype.js
2006/09/22 Javascript
phpwind放自动注册方法
2006/12/02 Javascript
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
页面版文本框智能提示JS代码
2009/11/20 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
python生成器generator用法实例分析
2015/06/04 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
python实现简单点对点(p2p)聊天
2017/09/13 Python
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
详解Python如何生成词云的方法
2018/06/01 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
python二维图制作的实例代码
2020/12/03 Python
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
机械制造毕业生求职信
2014/03/03 职场文书
芙蓉镇观后感
2015/06/10 职场文书
python如何读取.mtx文件
2021/04/22 Python
react antd实现动态增减表单
2021/06/03 Javascript
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python