箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue;
普通函数中的this指向是变化的(使用函数时的指向),谁调用的指向谁。
 
箭头函数:
 let timerOne = setInterval(() => {
    console.log(this);// vue
}, 1000);
let timerTwo = setInteval(function () {
    console.log(this); // window,因为setInterval()函数是window对象的函数
}, 1000);
打印结果:
 
 let timer = setInterval(() => {
  this.myFunc();
},1000);
myFunc(){
  console.log('sunyu is handsome !');
}
不用箭头函数也可以搞定:
 myFunc(){
  console.log(vm.name);// name为已经在created中声明的变量
};
let vm = this;
let timer = setInteval(function () {
       myFunc();
}, 1000) ;
最后温馨提示不要忘了清除定时器哦!
 

vue中使用定时器时this指向的更多相关文章

  1. vue中使用定时器时this指向问题

    在写一个很小的demo时,用的普通函数写法,没有用es6箭头函数,发现this变化了,后来查找到了问题所在: 箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue 普通函数中的 ...

  2. VUE中集成echarts时 getAttribute of null错误

    错误 错误场景一: 错误提示: 在运行Vue项目时出现了上述错误,出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的,代码如下: // 基于准备好的dom,初始化echart ...

  3. vue中prop传值时加不加v-bind(冒号:)

    前言:有关Vue中父组件通过prop传值给子组件时,是否加v-bind的问题,没弄清楚时感觉很乱,弄清楚之后很简单. 由于结果记起来很容易,所以先给出结果: 只有传递字符串常量时,不采用v-bind形 ...

  4. vue中使用swiper-slide时,循环轮播失效?

    前言 vue 项目中使用时,组件swiper-slide 如果用v-for循环的话,loop:true 就不能无缝轮播,每次轮播到最后一张就停止了??? 正文 代码如下: <swiper :op ...

  5. 记录在vue中使用jsx时踩过的坑

    使用方法及细节就不一一说了. 1.给input或者textarea绑定value时,出现失效的问题.解决方法:https://github.com/vuejs/babel-plugin-transfo ...

  6. vue中清除定时器

    1.data中定义 timer:90,timeName:null 点击支付则倒计时按钮出来 pay(){ this.timeName= setInterval(()=>{ this.timer- ...

  7. Vue中使用定时器setInterval和setTimeout

    js中定时器有两种,一个是循环执行setInterval,另一个是定时执行setTimeout 一.循环执行(setInterval) 顾名思义,循环执行就是设置一个时间间隔,每过一段时间都会执行一次 ...

  8. vue中使用ts时如何导入mixins

    方法一 // mixins.ts import { Vue } from "vue-property-decorator"; export class TableSelect ex ...

  9. vue中刷新页面时去闪烁,提升体验方法

    首先在最外层div添加v-if="isReloadAlive",并创建变量isReloadAlive = true 随后添加provide()以及reload方法,如下: expo ...

随机推荐

  1. 【转载】使用Jedis操作redis

    Redis是一个开源的Key-Value数据缓存,和Memcached类似. Redis多种类型的value,包括string(字符串).list(链表).set(集合).zset(sorted se ...

  2. Asp.net Report动态生成

    rdlc报表实质上是一个xml文件,如果要实现动态报表,就需要动态生成rdlc文件,实质上就是读写xml文件: protected XmlDocument GenerationAddReportCol ...

  3. Apollo 与 .net core

    appsettings配置内容 { "Apollo": { "AppId": "netcore", "Env": &qu ...

  4. Python基础初识

    一.安装 暂时没空写,预留 二.python基础初识 2.1 注释 当行注释:# 被注释内容 多行注释:'''被注释内容''',或者"""被注释内容"" ...

  5. jenkins+docker+git+harbor构建及代码回滚(未完)

    目录 一.部署 环境工作流程介绍 部署harbor 一.部署 前提环境说明 192.168.111.3 该机器为git本地仓库,及git远程仓库(git用户创建),及Harbor镜像仓库 192.16 ...

  6. FPGA学习笔记之按键控制

    参考: [黑金原创教程][FPGA那些事儿-驱动篇I ]实验二:按键模块① - 消抖 源码如下: key_funcmod.v module key_funcmod(clk, rst, key, led ...

  7. mr-robot靶机练习

    在业余时间进行的靶机练习,也是根据网上的大牛做下来的,重复造轮子吧,但是个人感觉还是即使是造轮子也是需要自己动手呀,毕竟每个人做的过程中遇到的问题是不一样的,这样既可以帮助别人也能锻炼自己.希望可以帮 ...

  8. VMware14虚拟机与宿主机建立通讯

    当我们在VMware14中运行虚拟机搭建实验环境就需要与我们的宿主机或另一台虚拟机连接通讯,下面我们就来看看如何建立通讯,实现虚拟机与宿主机.虚拟机与虚拟机互联互通. 准备环境:一台安装好VMware ...

  9. 解密Redis持久化【翻译】

    本文来自Redis的作者,他在论坛看到大家对Redis持久化误解较大,所以写此文章论述持久化 写操作的流程 首先我们来看一下数据库在进行写操作时到底做了哪些事,主要有下面五个过程. 客户端向服务端发送 ...

  10. 华为OJ:字符串处理

    #include <iostream> #include <stdlib.h> #include <string> #include <sstream> ...