mounted钩子函数_vue中created钩子函数与mounted钩子函数的使用区别
1:在使用vue框架的过程中,我们经常需要给一些数据做一些初始化处理,这时候我们常用的就是在created与mounted选项中作出处理。
首先来看下官方解释,官方解释说created是在实例创建完成后被立即调用。在这一步,实例已完成以下配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
这话的意思我觉得重点在于说挂载阶段还没开始,什么叫还没开始挂载,也就是说,模板还没有被渲染成html,也就是这时候通过id什么的去查找页面元素是找不到的。下面看下实例来证明。
看这个例子的结果截图如下,此错误证明找不到id为name的Dom元素。即模板还未渲染成html
所以,一般creadted钩子函数主要是用来初始化数据。
2:mounted钩子函数一般是用来向后端发起请求拿到数据以后做一些业务处理。官方解释如下:
el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。
这意思是该钩子函数是在挂载完成以后也就是模板渲染完成以后才会被调用。下面看实例
下面是结果
取到了值,这说明这时候vue模板已经渲染完毕。因此,Dom操作一般是在mounted钩子函数中进行的
总结:
通常created使用的次数多,而mounted通常是在一些插件的使用或者组件的使用中进行操作,比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步,而如果你写入组件中,你会发现在created中无法对chart进行一些初始化配置,一定要等这个html渲染完后才可以进行,那么mounted就是不二之选。
methods:{}中的方法都需要主动去触发,比如点击click之类的
而created(){}、mounted(){}、里面的代码都是自动去执行的,即vue生命周期到了哪一步就直接去执行对应钩子函数里面的代码了,无需手动去执行
created中主要放初始化获取数据之类,mounted()中挂载到具体的DOM节点
computed:{} 计算属性,什么是计算属性呢,我个人理解就是对数据进行一定的操作,可以包含逻辑处理操作,对计算属性中的数据进行监控。计算属性是基于它的以来进行更新的,只有在相关依赖发生改变时侧能更新变化,以函数的形式返回结果。然后可以像绑定普通属性一样在模板中绑定计算属性。
{{msg}}
网址 {{msg}}的网络协议是:{{msg2}}
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;
}
}
})
}
mounted 是生命周期钩子,vue的生命周期中一个实例的mounted只会运行一次。mounted在vue的渲染模板挂载到$el元素上才会调用,很显然你export的时候el都么有自然不会运行mounted钩子函数了。
所有的方法都应该在methods里定义,然后在created或者mounted里 使用this调用方法,用这种方式实现初始化
export default {
name: 'Pos',
data () {
return {
msg: 'a pos website'
}
},
mounted(){
this.getN() //注意是this.getN(),this不能少
},
methods:{
getN(){
alert(1)
}
}
}
mounted钩子函数_vue中created钩子函数与mounted钩子函数的使用区别相关推荐
- vue子组件mounted不执行_vue中父子组件传值,解决钩子函数mounted只运行一次的问题...
因为mounted函数只会在html和模板渲染之后会加载一次,但是在子组件中只有第一次的数据显示是正常的,所以需要再增加一个updated函数,在更新之后就可以重新进行取值加载,完成数据的正常显示. ...
- python 类函数 成员函数_python中的类函数、静态函数、成员函数以及类变量、成员变量...
1 classMethodDemo():2 classVar = 'This is a class variable' #类变量,可在类函数或者成员函数中引用,为所有实例共有的 3 def __ini ...
- gzdeflate函数_PHP中的gzcompress、gzdeflate、gzencode函数详解_php实例
PHP中存在一组看起来很像的压缩解压函数: 压缩函数:gzcompress gzdeflate gzencode 解压函数:gzuncompress gzinflate gzdecode gzdeco ...
- gzdeflate函数_PHP中的gzcompress、gzdeflate、gzencode函数详解
这篇文章主要介绍了PHP中的gzcompress.gzdeflate.gzencode函数详解,本文深入分析了它们的相同点和不同点,需要的朋友可以参考下 PHP中存在一组看起来很像的压缩解压函数: 压 ...
- python匿名函数lambda_Python中什么情况下应该使用匿名函数lambda
lambda函数一般是在函数式编程中使用的.通常学习的C/C++/Java等等都是过程式编程,所以不常接触lambda函数. 其实这货在C++中已经有所运用了,如果对stl的迭代器比较熟悉的话,就会知 ...
- vue进入页面执行的钩子函数_vue中各选项及钩子函数执行顺序详解
{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],&q ...
- vue在created调用点击方法_vue中created、mounted等方法整理
created:html加载完成之前,执行.执行顺序:父组件-子组件 mounted:html加载完成后执行.执行顺序:子组件-父组件 methods:事件方法执行 watch:watch是去监听一个 ...
- axios vue 回调函数_vue中ajax请求与axios包完美处理
这次给大家带来vue中ajax请求与axios包完美处理,vue中ajax请求与axios包处理的注意事项有哪些,下面就是实战案例,一起来看一下. 在vue中,经常会用到数据请求,常用的有:vue-r ...
- axios vue 回调函数_vue中的ajax请求和axios包详解
在vue中,经常会用到数据请求,常用的有:vue-resourse.axios 首先,引入axios CDN: npm: npm install axios 并在全局的js中引入:import axi ...
最新文章
- const在指针中的用法
- AsyncQueryHandler了解
- Jeesite信息化快速开发平台
- 文档过期打不开怎么办_标准的产品需求文档在这里!(详细说明版)(2)
- Docker--------企业级最佳入门
- 数学建模——遗传算法(GA)
- java-php-python-ssm社区志愿者服务管理系统计算机毕业设计
- 兴业研发晨会纪要2008年 10月 30日
- 光波传输的角谱理论【理论,实例及matlab代码】
- 我的世界php motd,我的世界MOTD攻击服务器 频繁发送请求
- PowerDesigner菜单翻译
- 大厂高频面试题之Java内存区域分布
- python 导入excel 分词_如何对excel表格里的词结巴分词python
- blt功能_BitBlt使用详解 | 学步园
- Charles软件破解方法
- 一步步搭建自己的博客网站
- 【推荐系统】评估指标总结
- 笔记本安装MeeGo系统教程
- 【总结】1165- 前端团队代码规范最佳实践,个人成长必备!
- 梦网科技--手机短信验证码实现
热门文章
- python 过滤相似图片_Python过滤纯色图片,挑选视频封面
- char与varchar的区别?
- 【算法题】2309. 兼具大小写的最好英文字母
- [附源码]java毕业设计在线视频网站
- html5 页面拨打电话,发短信,发邮件
- MIC灵敏度, MIC动态范围下限值估计, -3dB, dB加减
- Python爬取热门微博,并存储到MySQL中
- 功率半导体的正负温度系数
- DDD话语评价之二:“值对象”是DDD的创新吗(上)
- 赛门铁克软件恢复服务器系统,网络版赛门铁克杀软服务器重装恢复