在vue的mounted下使用setInterval的误区
1. vue对象的生命周期
1). 初始化显示(只执行一次)
* beforeCreate()
* created()
* beforeMount()
* mounted()
2). 更新状态(可执行多次)
* beforeUpdate()
* updated()
3). 销毁vue实例: vm.$destory()(只执行一次)
* beforeDestory()
* destoryed()
2. 常用的生命周期方法
created()/mounted(): 发送ajax请求, 启动定时器等异步任务
beforeDestory(): 做收尾工作, 如: 清除定时器
前几天刚开始学vue就碰到了vue里面的坑,在vue生命周期的mounted使用定时器,用了匿名函数作为回调函数,结果没有任何效果,代码入下
<div id="test">
<button>vue的生命周期</button>
<p v-show="isShow">你是佩奇吗</p>
</div> <script type="text/javascript" src="../js/vue.js"></script>
<script>
new Vue({
el:'#test',
data:{
isShow:true
} ,
mounted() {
setInterval(function (){
this.isShow=!this.isShow;
},1000)
}
});
</script>
查阅了一下,发现下面这种写法,存在一个问题,当前this指向的是当前的定时器positionTimer
mounted() {
setInterval(function (){
this.isShow=!this.isShow;
},1000)
}
使用了lambda表达式(箭头函数)替换匿名函数的写法,当前this指向的是外部的vue对象
mounted() {
setInterval(()=>{
this.isShow=!this.isShow;
},1000)
效果显示正常,如有大咖有更通俗的解释,望纠正指教,谢谢

在vue的mounted下使用setInterval的误区的更多相关文章
- vue开发小结(下)
前言 继前几天总结了vue开发小结(上)后,发现还有很多的点没有能列举出来,于是还是打算新建一个下篇,再补充一些vue开发中需要注意的细节,确实还是都是细节的问题,我只是在这里强调下,希望对大家有帮助 ...
- 浅谈Vue不同场景下组件间的数据交流
浅谈Vue不同场景下组件间的数据“交流” Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...
- 【Vue】浅谈Vue不同场景下组件间的数据交流
浅谈Vue不同场景下组件间的数据“交流” Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...
- VUE Node模式下,如何改变菜单的颜色,如何将超长文字缩略显示,在鼠标进入后展开全部显示,鼠标移出则恢复缩略显示
VUE Node模式下,如何改变菜单的颜色,如何将超长文字缩略显示,在鼠标进入后展开全部显示,鼠标移出则恢复缩略显示: “事件”引起变量值的变化,系统引擎自动根据变量值的变化刷新页面 在VUE Nod ...
- vue mint-ui 框架下拉刷新上拉加载组件的使用
安装 npm i mint-ui -S 然后在main.js中引入 import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vue.us ...
- 百度地图的初始化应当在vue的mounted()函数里执行
今天使用百度地图出现了一个问题,百度地图初始化后宽.高都是0,但是地图容器宽高都设置好的, 一开始怎么都排除不出问题,后来无语了,把布局直接复制进入百度地图的示例里运行发现没有问题, 所以想到不是百度 ...
- vue 在nginx下页面刷新出现404问题解决和在nginx下页面加载了js但是页面显示空白问题解决
一.vue 在nginx下页面刷新出现404 在网上翻遍了所有这样问题的解决办法,全都是一个解决办法也是正确的解决办法,(后来在vue官网上关于history方式出现404解决方法也是这样说的),只是 ...
- vue & async mounted
vue & async mounted refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
- Vue实现树形下拉框
Vue自身并没有实现树形下拉框的组件,找了很多资料,最后在Github上找了个插件vue-treeselect,功能还是比较全的,模糊搜索.多选.延迟加载.异步搜索.排序,自定义.Vuex支持等等.这 ...
随机推荐
- Hadoop3.1.2 + Hbase2.2.0 设置lzo压缩算法
Hadoop3.1.2 + Hbase2.2.0 设置lzo压缩算法: 写在前面,在配置hbase使用lzo算法时,在网上搜了很多文章,一般都是比较老的文章,一是版本低,二是一般都是使用hadoop- ...
- 基于Docker搭建Jumpserver堡垒机操作实践
一.背景 笔者最近想起此前公司使用过的堡垒机系统,觉得用的很方便,而现在的公司并没有搭建此类系统,想着以后说不定可以用上:而且最近也有点时间,因此来了搭建堡垒机系统的兴趣,在搭建过程中参考了比较多的文 ...
- gym/102059/problem/I. Game on Plane SG函数做博弈
传送门: 题意: 给定一个正n边形的点.双方轮流连点成线,要求所画的线不能与之前的线相交.当某个人连成一个回路,这个人就输了.问先手必胜还是后手必胜. 思路: SG函数,因为一条线相当于把图劈成了两半 ...
- 牛客小白月赛6 B 范围 数学
链接:https://www.nowcoder.com/acm/contest/135/B来源:牛客网 题目描述 已知与均为实数,且满足: 给定A,B,求x的取值范围? 由于Apojacsleam的计 ...
- POJ 2230 Watchcow 欧拉图
Watchcow Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 8800 Accepted: 3832 Specia ...
- Spring 两大核心 IOC 和 AOP
如果你的简历上写着Spring (请详述一下spring的两大核心)这个问题一定会被问到. 一.什么叫IOC 1. IOC 全称(Inversion of Control)-- 控制反转. IOC 只 ...
- Django学习笔记(一):第一个django程序
1.创建和运行 django-admin startproject xxx python manage.py runserver 2.第一个项目程序 wsgi.py中文名:python服务器网关接口. ...
- 【Offer】[39] 【数组中出现次数超过一半的数字】
题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如,输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数 ...
- IDEA中创建maven web项目
本文将带你一路从IDEA中maven的配置到创建maven web项目,掌握IDEA中maven的使用. 一.IDEA中配置maven 开发中一般我们使用自己下载的maven,不使用IDEA工具自带的 ...
- Storm 系列(一)—— Storm和流处理简介
一.Storm 1.1 简介 Storm 是一个开源的分布式实时计算框架,可以以简单.可靠的方式进行大数据流的处理.通常用于实时分析,在线机器学习.持续计算.分布式 RPC.ETL 等场景.Storm ...