vue实例内部方法的this指向问题

最新推荐文章于 2023-04-15 17:33:17 发布
最新推荐文章于 2023-04-15 17:33:17 发布
阅读量838 收藏 3
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58399188/article/details/119813191
版权

如果是vue实例本身的属性和方法,那么this指向就是vue实例本身,比如methods对象,computed对象,watch对象里的方法,要用方法名(){}写,就代表this指向是vue实例,如果使用()=>{}箭头函数的方式定义方法,则this指向window,因为箭头函数中的this指向的是外部函数的this指向,普通函数的this指向的是它的调用者,而vue中的methods和computed和watch和各种回调钩子,因为他们是vvue本身的方法所以只要他们使用普通函数定义this当然指向他们的调用者即this

除了这些一级方法,二级方法啥的最好都用箭头函数,因为箭头函数this指向外部函数的this,这些二级函数外部正好是一级函数,一级函数的this正好的vue,所以正好nice.

久伴云天
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 在methods时的this指向问题
sunlando的博客
12-25 1773
vue的methods的this指向问题 使用了element ui 的框架 methods : { checkNum(){ var numb = [1,2,3,4,5,6]; numb.forEach((item) => { this.$message({ message : '$message未定义', type:'error' }) console.log(item)
【Vue踩坑之一】箭头函数的this指向
FrequencyStar的博客
07-29 1333
【一】methods箭头函数的this指向 箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象 <body> <h1 id="app"> <span>{{message}}</span><br /> <button v-on:click="reverseMessage">逆转消息</button> </
Vue中的methods配置项中的箭头函数this指向及相关源码分析
D-的博客
04-15 7226
之前在使用Vue时遇到一个问题，我们知道在Vue的methods中定义函数时，要想使用到Vue实例或者组件实例的this时，我们就不能使用箭头函数定义方法，因为箭头函数中的this是在函数定义时生成的，并不是函数调用使用时生成。但是我们如果使用了箭头函数，那么其中的this指向哪里呢?我刚开始也是以为肯定是指向Window的,这仅仅是局限于用script映入vue.js时才会指向Window,但其实在Vue-cli中，如果使用箭头函数定义了methods中的方法，那么this是指向undefined的。
vue中this到底指向谁
Var521的博客
03-19 1983
今天，在练习代码的时候遇到了关于this指向谁的问题，因一直都未曾深究，始终处于懵懂状态，这次决定把他弄明白，故有此笔记。 问了前辈，前辈告诉我：“现在前端有两种this： 1. 普通的this始终指向调用者 2. 而箭头函数的this由上下文决定 ”。 此例子是非父子组件相互传值： <body> <div id="app"> <div>父组件&lt...
vue中watch监听变量变化时this指向问题
Li_Sen_的博客
04-09 8821
错误原因分析 这儿我们要搞清楚es6中箭头函数的特殊之处。箭头函数自动绑定了上下文对象到this中。那么就说明我们在箭头函数中引用的this不再是vue实例。 使用普通函数时this才是vueComponent对象。所以大家在使用es6特性的时候一定要注意。在vue的内部一定要注意箭头函数对于this对象的影响。当然如果你非要使用箭头函数也是可以的，我们通常的一个做法是在组件data函数中中定义v...
详解vue中的computed的this指向问题
10-17
- **使用getter方法**：Vue.js还允许在`computed`中定义getter方法，这样`this`也会正确指向Vue实例： ```javascript computed: { allFigure: { get() { console.log(this.value); // `this`指向Vue实例 } }...
浅谈vue方法内的方法使用this的问题
12-03
在JavaScript中，`this`的指向取决于其上下文环境，而在Vue的方法内，`this`通常指向当前Vue实例。本文将深入探讨在Vue方法内使用`this`的问题，特别是在涉及嵌套函数时如何正确地引用实例属性和方法。 首先，我们...
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
10-14
主要介绍了浅谈vue使用axios的回调函数中this不指向vue实例,为undefined，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中this的指向
热门推荐
atu1111的博客
07-25 1万+
vue中this的指向 1.在Vue所有的生命周期钩子方法   比如在mounted里使用this，this指向调用它的Vue实例，如下列子： 2.vue组件生命周期钩子方法里面还有方法使用this   在函数内部使用this时，this会指向window，而非vue实例。所以除了vue组件自身方法外，在别的地方调用this时， 首先需要在最外部，设置一个变量，将其绑定上vue实例。 3.vue普通方法中使用this   this指向调用它的Vue实例 4.vue箭头方法中使用this   箭头函数没
每日三问之watch&&methods&&computed区别、this指向解析、如何更改this指向
君子不器
10-23 506
watch&&methods&&computed区别
Vue实例中this的指向问题
富尔牛的博客
08-14 2091
首先让我么看一些代码，先不要往下看，你自己先想一下这里的this分别指的是什么。 <script> var msg = '我是window下的msg' var vm = new Vue({ el: '#app', data: { msg: '我是vm实例中的msg' ...
Vue实例methods中的方法this指针，在eventBus和addListener中的指向问题
chenjixue的博客
01-16 1059
首先说结论，Vue中的methods方法this在源码中全部被bind到当前Vue组件实例，上源码 可以看出vue里面的方法都被bind强制绑定了this上下文，也就是当前Vue组件实例 functionnativeBind(fn,ctx){returnfn.bind(ctx) } varbind=Function.prototype.bind?nativeBind:polyfillBind;functioninitMethods(vm,methods){/...
[vue] 监视属性，天气小案例， 箭头函数和普通函数的this指向问题
qq_14993591的博客
11-02 345
天气案例 效果 用插值语法写 <div id="root"> <h2>今天天气很{{info}}</h2> <button @click="{{isHot = !isHot}}">切换天气</button> </div> const vm = new Vue({ el: '#root', data: {
Vue钩子函数中的this为什么能指向Vue的实例而不是指向传入的参数options（Vue源码解读）
milugloomy的博客
09-10 1714
起因 先看一段Vue的代码，在Vue的原型链上增加了一个setData方法，然后实例化Vue对象，传入一个Object类型的参数 Vue.prototype.setData = function (key, val) { if (this.data) { this.data[key] = val } else { this.data = { [key]: ...
自己理解的vue中this指向问题
sinat_24328329的博客
06-25 316
自己理解的VUE中this的指向问题
关于Vue中this的指向问题
Sfh的博客
07-20 2796
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <script src="https://unpkg.com/vue@2.5.9/dist/vue.j
vue-mixins一些常用方法
程序员秋风的博客
07-12 5571
前言 今天接手公司的一个vue的项目，发现项目中有个mixins属性，我发现之前的项目中都没有发现过这个属性。查阅了官方文档并进行了总结。 官方文档: mixins vue-mixins与父子组件还是有很大的区别的。 组件与mixins区别 组件： 父组件 + 子组件 >>> 父组件 + 子组件 mixins： 父组件 + 子组件 >>> new父组件 使用方法
理解Vue中的methods对象方法里的this指向，并解读源码
qq_41308489的博客
10-18 4443
Vue3的版本 "version": "3.2.20" 阅读区域 618 - 645 解决疑惑 1. methods 对象的 this指向 2. methods 对象的里的 方法 为什么不能用箭头函数 代码 // 当 methods 有方法时 if (methods) { // 对methods对象中的每一个方法遍历 for (const key in methods) { // 取出每一个方法 const methodHandler = (methods
vue中的this指向问题
JINGinC的博客
10-23 1万+
最近写项目遇到很多this指向的问题，今天来写一下我总结的this指向 看了很多文章，之前也在私下总结过，对于正常函数，谁调用的它，this就指向谁，而箭头函数没有this，它的this指向一般就是上下文中，与谁调用它没关系。 但是在Vue实例中，methods中如果用的是正常函数，那么它的this就指向Vue实例；如果是箭头函数，this就指向window对象。 在Vue的官方文档是这么解释的： methods 将被混入到 Vue ...
Vue实例中的this指向问题
最新发布
05-12
在 Vue 实例中，this 指向当前组件的实例对象。这个实例对象包含了组件的所有属性和方法，可以通过 this 访问这些属性和方法。 然而，在某些情况下，this 的指向可能会出现问题，主要有两种情况： 1. 在回调函数中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值