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 不能释放内存.
Sep 07 Javascript
jquery里的正则表达式说明
Aug 03 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
Apr 13 Javascript
提高jQuery性能优化的技巧
Aug 03 Javascript
js中 计算两个日期间的工作日的简单实例
Aug 08 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
JS去掉字符串中所有的逗号
Oct 18 Javascript
vue 设置路由的登录权限的方法
Jul 03 Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
vue项目打包后怎样优雅的解决跨域
May 26 Javascript
js实现简单分页导航栏效果
Jun 28 Javascript
vue多个元素的样式选择器问题
Nov 29 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
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
node.js中的fs.lchmod方法使用说明
2014/12/16 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
AngularJS入门教程之更多模板详解
2016/08/19 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
JS用最简单的方法实现四舍五入
2019/08/27 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
python实现八大排序算法(2)
2017/09/14 Python
Django实现全文检索的方法(支持中文)
2018/05/14 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
印度第一网上礼品店:IGP.com
2020/02/06 全球购物
英语专业学生个人求职信范文
2014/01/06 职场文书
八一建军节活动方案
2014/02/10 职场文书
安全责任书范本
2014/04/15 职场文书
师德师风个人反思
2014/04/28 职场文书
运动会方队口号
2014/06/07 职场文书
前台接待岗位职责
2015/02/03 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
个人更名证明
2015/06/23 职场文书
大学宣传委员竞选稿
2015/11/19 职场文书
python绘制箱型图
2021/04/27 Python
Python中的 Set 与 dict
2022/03/13 Python