Vue中关于this指向的问题示例详解

目录
  • 由Vue管理的函数
  • 不被vue管理的函数
  • this指向大致分类
  • 总结

在Vue中，方法体里用this调用vue实例的数据，有时会指向window，导致调用失败报错。

由Vue管理的函数

例如：

  • computed 计算属性
  • watch 监视属性
  • filters (Vue3中已弃用且不再支持) 过滤器....

上述属性里配置的函数不要采用箭头函数写法，因为箭头函数没有自己的this对象，使用this时会向外找到window，不会指向Vue实例，也就调用不到Vue中的数据。

不被vue管理的函数

例如：

  • setTimeout计时器里的回调函数
  • setInterval定时器里的回调函数
  • ajax请求里的回调函数....

上述回调函数(除定时器外)使用普通函数定义的话，里面的this指向的是window，定时器中this指向undifined(这个死磕了老长时间，vscode没提示，换webstorm调试出来的...)

用箭头函数时，this会向函数外找，找到Vue实例（因为在vue环境里嘛）。

this指向大致分类

奉上 菜鸟教程(yyds) 里大佬总结的

  • 在对象方法中， this 指向调用它所在方法的对象。
  • 单独使用 this，它指向全局(Global)对象。
  • 函数使用中，this 指向函数的所属者。
  • 严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素。
  • apply 和 call 允许切换函数执行的上下文环境（context），即 this 绑定的对象，可以将 this 引用到任何对象。

附上 菜鸟中介绍this的直达链接：this详解

总结

在Vue环境里：

  • 由Vue管理的函数,尽量使用普通函数定义。
  • 不被Vue管理的函数，尽量使用箭头函数定义。
  • 监视属性里的普通函数，函数体里要使用定时器的话，要用箭头函数来定义定时器。(举个栗子)

这样保证this总是指向Vue实例，可以调用到Vue数据。

到此这篇关于Vue中关于this指向的问题 的文章就介绍到这了,更多相关vue this指向内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解vue中的computed的this指向问题

    今天在写vue项目时,用到了computed计算属性,遇到了使用箭头函数出现this指向问题,这里记录下 1.箭头函数中的this 箭头函数内部的this是词法作用域,由上下文确定 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象 2.vue中的computed 使用箭头函数 list: () => { console.log(this) } 不使用箭头函数 allFigure: function() { console.log(this) }, 使用get() allFig

  • vue使用axios时关于this的指向问题详解

    前言 众所周知axios是vue-resource后出现的Vue请求数据的插件.vue更新到2.0之后,作者尤大就宣告不再对vue-resource更新,而是推荐的axios.更多的详细介绍大家可以参考这里://www.jb51.net/article/109444.htm 本文主要介绍了关于vue使用axios时this的指向问题,下面话不多说了,来一起看看详细的介绍吧. 1.解决办法 在vue中使用axios做网络请求的时候,会遇到this不指向vue,而为undefined,可以使用箭头函

  • 在Vue中使用防抖与节流,及this指向的问题

    目录 使用防抖与节流,及this指向问题 一顿操作后 使用防抖函数所遇见的坑 正常写法 使用 Vue中写法使用 Vue中的watch的防抖简写 使用防抖与节流,及this指向问题 最近项目中遇到了防抖与节流问题,搜索了很多文章都有this指向的问题,最后不得不采取一种很low的方法 data中定义isFirst为1 if (this.isFirst < 2){     this.isFirst = 2     setTimeout(() => {         this.isFirst =

  • 浅谈vue使用axios的回调函数中this不指向vue实例,为undefined

    今天在vue-cli脚手架搭建的项目中使用axios时,遇到无法解析this.$route的报错信息,最后发现是作用域的问题. 1.解决方法:使用 => 原代码: axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); 修改为: axios.get('/u

  • 基于Vue中this.$options.data()的this指向问题

    目录 this.$options.data()的this指向问题 vue文档中有关于data的指向问题的解释 vue骚操作之this.$options.data() 重置vue组件的data数据 小结一下 this.$options.data()的this指向问题 项目里遇到一个问题,用this.$options.data()重置组件data时报错,原因是因为form里的rule规则采用了this写法. 如下: rules: {         code: [this.$rules.requir

  • Vue中关于this指向的问题示例详解

    目录 由Vue管理的函数 不被vue管理的函数 this指向大致分类 总结 在Vue中,方法体里用this调用vue实例的数据,有时会指向window,导致调用失败报错. 由Vue管理的函数 例如: computed 计算属性 watch 监视属性 filters (Vue3中已弃用且不再支持) 过滤器.... 上述属性里配置的函数不要采用箭头函数写法,因为箭头函数没有自己的this对象,使用this时会向外找到window,不会指向Vue实例,也就调用不到Vue中的数据. 不被vue管理的函数

  • vue中使用mxgraph的方法实例代码详解

    1.npm 引入 npm install mxgraph --save 2.这个模块可以使用require()方法进行加载.它将返回一个接受对象作为选项的工厂函数.必须将mxBasePath选项提供给工厂函数,而不是将其定义为一个全局变量. var mxgraph = require("mxgraph")( { // 以下地址不需要修改 mxImageBasePath: "./src/images", mxBasePath: "./src" })

  • Vue中使用webpack别名的方法实例详解

    在工作中,我们经常会写出这种代码: import MHeader from '../../components/m-header/m-header' @import "../../common/stylus/variable" @import "../../common/stylus/mixin" 即,需要引入公共文件,但是公共文件的文件路径里当前文件很远,那么就会形成上面示例中的那种路径很长的情况. 而因为文件目录是约定俗成的,不可轻易更改,无法修改相对路径.那么

  • vue cli4下环境变量和模式示例详解

    本文介绍了vue cli4下环境变量和模式示例详解,分享给大家,具体如下: 官方文档 环境变量 一个环境变量文件只包含环境变量的键值对: NODE_ENV=development VUE_APP_BASE_URL=http://127.0.0.1:8080/ 注意: NODE_ENV - 是 "development"."production" ."test"或者自定义的值.具体的值取决于应用运行的模式 BASE_URL - 会和 vue.con

  • Vue3中Vuex状态管理学习实战示例详解

    目录 引言 一.目录结构 二.版本依赖 三.配置Vuex 四.使用Vuex 引言 Vuex 是 Vue 全家桶重要组成之一,专为 Vue.js 应用程序开发的 状态管理模式 + 库 ,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 一.目录结构 demo/ package.json vite.config.js index.html public/ src/ api/ assets/ common/ components/ store/ index.

  • Vue.extend实现组件库message组件示例详解

    Vue.extend实现组件库message组件示例详解

    目录 概述 Vue.extend message 组件配置对象(就是.vue文件) message 生成组件的函数 使用方法 效果图 总结 概述 当我们使用组件库的时候,某些组件并不是直接放到模板当中进行使用,而是通过api的方式调用生成组件并且挂在到我们的页面中,其中最常见的就是message组件,我们在组件库中看到的多数都是api调用的方式生成.记录自己基本实现message组件. Vue.extend 在vue中,要实现通过api方式实现组件的使用,这个aip是必不可少的,因此我们先了解下

  • vue3中的透传attributes教程示例详解

    vue3中的透传attributes教程示例详解

    目录 引言 绑定样式 对象 数组 透传的attributes 透传 attributes 之样式绑定 透传 attributes 之事件绑定 特殊1:组件嵌套 特殊2:禁用透传attributes 特殊3:在 javascript 中访问透传的attributes 总结 引言 最近两年都是在使用 react 进行项目开发,看技术博客都是针对 react 和 javaScript 高级方面的,对 vue 的知识基本上遗忘的差不多了.最近开始慢慢回顾 vue 的知识以及对新的语法进行学习,为后面的计

  • vue中datepicker的使用教程实例代码详解

    写这个文章主要是记录下用法,官网已经说的很详细了 npm install vue-datepicker --save html代码 <myDatepicker :date="startTime" :option="multiOption" :limit="limit"></myDatepicker> <myDatepicker :date="endtime" :option="timeo

  • Vue中遍历数组的新方法实例详解

    1.foreach foreach循环对不能使用return来停止循环 search(keyword){ var newList = [] this.urls.forEach(item =>{ if(item.name.indexOf(keyword) != -1){ newList.push(item) } }) return newList } 2.filter item对象就是遍历数组中的一个元素,includes是es6中的新方法,在search方法中直接返回新数组 search(key

  • python中前缀运算符 *和 **的用法示例详解

    这篇主要探讨 ** 和 * 前缀运算符,**在变量之前使用的*and **运算符. 一个星(*):表示接收的参数作为元组来处理 两个星(**):表示接收的参数作为字典来处理 简单示例: >>> numbers = [2, 1, 3, 4, 7] >>> more_numbers = [*numbers, 11, 18] >>> print(*more_numbers, sep=', ') 2, 1, 3, 4, 7, 11, 18 用途: 使用 * 和

随机推荐