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 相关文章推荐
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
js常用代码段收集
Oct 28 Javascript
JavaScript中的apply()方法和call()方法使用介绍
Jul 25 Javascript
简介JavaScript中的sub()方法的使用
Jun 08 Javascript
大型JavaScript应用程序架构设计模式
Jun 29 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
Nov 29 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
Mar 07 Javascript
基于jquery实现左右上下移动效果
May 02 jQuery
详解VUE调用本地json的使用方法
May 15 Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 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
浅谈PHP Cookie处理函数
2016/06/10 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
原生js实现日期联动
2015/01/12 Javascript
基于jquery实现省市联动特效
2015/12/17 Javascript
javascript运算符——位运算符全面介绍
2016/07/14 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
浅析vue插槽和作用域插槽的理解
2019/04/22 Javascript
利用Python演示数型数据结构的教程
2015/04/03 Python
Python中str is not callable问题详解及解决办法
2017/02/10 Python
Python外星人入侵游戏编程完整版
2020/03/30 Python
python3.6使用pymysql连接Mysql数据库
2018/05/25 Python
Python装饰器语法糖
2019/01/02 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
Python的形参和实参使用方式
2019/12/24 Python
Python发送邮件实现基础解析
2020/08/14 Python
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
英国电子产品购物网站:Tech in the basket
2019/11/08 全球购物
仓库管理制度
2014/01/21 职场文书
房屋租赁协议书范本
2014/04/10 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
广告业务员岗位职责
2015/02/13 职场文书
国庆节慰问信
2015/02/15 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
铁人纪念馆观后感
2015/06/16 职场文书
公司周年庆典致辞
2015/07/30 职场文书
Golang 空map和未初始化map的注意事项说明
2021/04/29 Golang
python编写五子棋游戏
2021/05/25 Python
Java 在线考试云平台的实现
2021/11/23 Java/Android
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android