Vue中为什么不能使用箭头函数来定义methods函数（详解）

最新推荐文章于 2024-03-14 11:41:58 发布
最新推荐文章于 2024-03-14 11:41:58 发布
阅读量3.2k 收藏 16
点赞数 6
分类专栏： vue JavaScript 文章标签： vue.js javascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46242909/article/details/117531332
版权

Vue的methods里定义的函数为什么不能用箭头函数形式



//我们来先看一段简单的代码

在这里插入图片描述
在这里插入图片描述



形如上述做法，在methods里定义的函数btnClick(),如果用箭头函数的写法，this指向的将会是windows,并且windows根本访问不到data属性中返回的数据undefined

我们来解释两个问题

this的指向?

首先在箭头函数中this引用的是定义箭头函数的上下文（官方话语），我们来思考一下，定义btnClick()函数的究竟是什么，是全局上下文也就是Windows,因为无论是methods：{}还是Vue.createApp（{}），他们都是 一个对象，不是一个单独的作用域，所以这里的this是指向的Windows



为什么不能用箭头函数形式？

因为counter变量储存在data属性中，而data与methods不同的是，data实质上是一个函数，也就是说data拥有单独的作用域，外部windows自然无法访问到

请对长亭晚
关注
  • 6
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 10
    评论
专栏目录
vue自定义全局共用函数详解
01-21
如果你需要让一个工具函数在每个组件可用，可以把方法挂载到 Vue.prototype上。...以上这篇vue自定义全局共用函数详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
详解Vue 实例中的生命周期钩子
12-12
Vue 框架的入口就是 Vue 实例，其实就是框架中的 view model ，它包含页面中的业务处理逻辑、数据模型等，它的生命周期中有...需要注意的是含 this 的函数大多不要使用箭头函数，因为我们期望 this 指向 Vue 实例。 dat
在 Vue 实 例 中 编 写 生 命 周 期 hook 或 其 他option/propertie 时，为什么不使用箭头函数？
aichixiangcaia的博客
11-10 382
因为箭头函数自己没有定义 this 上下文，而是绑定到其父函数的上下文中。当 你在 Vue 文件中使用箭头函数（ =>）时， this 关键字并不会绑定到 Vue 实例， 因此会引发错误。所以强烈建议改用标准函数声明。 ...
vue生命周期钩子函数为什么不能使用箭头函数
xiaoxiaofly的博客
02-21 2321
来自vue官方文档的解释： 所有生命周期钩子的 this 上下文将自动绑定至实例中，因此你可以访问 data、computed 和 methods。这意味着你不应该使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。因为箭头函数绑定了父级上下文，所以 this 不会指向预期的组件实例，并且this.fetchTodos 将会是 undefined。 箭头函数自己没有定义 this 上下文，而是绑定到其父函数的上下文...
vue methods 函数为啥不能是箭头函数
最新发布
qq_37299479的博客
03-14 512
1、首先，因为methods里面的方法中的this是可以拿到data中定义的属性，所以它肯定不是window,但是。下面用代码说明为啥 methods中箭头函数中的this指向window。所以methods里面的方法不能定义箭头函数。
VUE学习（三） 箭头函数（=>）
热门推荐
n009ww的博客
07-29 1万+
习惯了写传统js的我，看了箭头函数的第一眼，就是....这啥东西？经过大神指点后，总结出的一条道理就是： 1.当在vue中使用箭头函数，可以在函数中使用this 来引用全局的vue对象，若在传统函数中，有时会引不到。 2.并不是所有的函数都适合改为箭头函数。当函数中使用本身的 this 时，我们再用箭头函数将会造成冲突，此时应在函数外面定义一个变量 let $this = this 。在...
vue2 在methods 中无法获取this对象
weixin_30362083的博客
03-20 691
在methods中使用箭头函数无法获取thisExamName:()=> { console.log(this);}这样就行了：ExamName:function() { console.log(this);} 转载于:https://www.cnblogs.com/chaoyong/p/8607810.html...
vue的学习笔记（12）之箭头函数
肿肿的博客
02-02 6040
箭头函数1、箭头函数的使用2、箭头函数参数和返回值3、箭头函数中的this 1、箭头函数的使用 定义函数有三种方式： <script> //箭头函数：也是一种定义函数的方式 //1.定义函数的方式：function const aaa=function () { } //2.对象字面量中定义函数 const obj={ bbb: function () { }, ccc() { } } //3.es6中的箭头函数 // const ddd=(参
为什么在vue中的methods中箭头函数的this指向undefined
u598975767的专栏
04-27 7928
先声明，本文站在巨人的肩膀上发散的思维。如题，首先this不会是vm，这一点很笃定。但为何是undefined不是window,想着有些困惑。 搞明白这个，首先得晓得这几个前提： 1.箭头函数的this是在定义函数时继承了其父级作用域的this，不是在执行过程中绑定的。 2.vue默认开启了严格模式。 3.全局作用域下的函数中使用this，在严格模式下this指向undefined 以上...
Vue中的methods配置项中的箭头函数this指向及相关源码分析
D-的博客
04-15 7102
之前在使用Vue时遇到一个问题，我们知道在Vue的methods中定义函数时，要想使用到Vue实例或者组件实例的this时，我们就不能使用箭头函数定义方法，因为箭头函数中的this是在函数定义时生成的，并不是函数调用使用时生成。但是我们如果使用了箭头函数，那么其中的this指向哪里呢?我刚开始也是以为肯定是指向Window的,这仅仅是局限于用script映入vue.js时才会指向Window,但其实在Vue-cli中，如果使用箭头函数定义了methods中的方法，那么this是指向undefined的。
Vue的methods里面不可以使用箭头函数
Stone
04-28 3266
Vue的methods里面不可以使用箭头函数 vue中的methods不可以使用箭头函数，因为this指向的不是vue实例，使用箭头函数打印this，发现是undefined methods: { test: () => { console.log(this); // undefined } } 箭头函数没有this，this其实是外部的this，即箭头函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。所以箭头函数的this是固定的，不能改变或者重
js---遍历的4种方法 & 箭头函数=＞
时光里的博客
09-07 7863
常规遍历方法 for i forEach 箭头函数=> for of 遍历 for in 遍历 for in 遍历的 是 数组下表 ,适合 遍历集合 箭头函数=> ES6标准新增了一种新的函数：Arrow Function（箭头函数） 基础语法 var fn1 = function(a, b) { return a + b } function fn2(a, b) { return a + b } 使用ES6箭头函数语法定义函数，将原函数的“func
对vue中methods互相调用的方法详解
12-08
最近在学习vue，并用vue+vue-router+axios+elementUI做了一个pos收银系统的前端页面，但是中间遇到methods里的方法调用问题。本身源码是没有调用的，但是我想直接调用多方便，结果出错了……然后百度了一波，终于...
vue父组件通过props如何向子组件传递方法详解
12-10
注意：不应该对 data 属性使用箭头函数 (例如data: () => { return { a: this.myProp }} ) 。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.myProp 将是 undefined ...
vue使用axios时关于this的指向问题详解
11-27
前言 众所周知axios是vue-resource后出现的Vue请求数据的插件...在vue中使用axios做网络请求的时候，会遇到this不指向vue，而为undefined，可以使用箭头函数”=>”来解决。如下： methods: { loginAction(formName) {
vue 箭头函数
weixin_35753431的博客
01-03 544
Vue.js 中的箭头函数是 JavaScript 中的语法糖，用于简化函数的书写方式。 它的一个主要优点是可以自动绑定 this。在 Vue 中使用箭头函数，this 始终指向组件的实例。 例如： <template> <div> <button @click="incrementCount">+</button> </div...
vue5箭头函数与路由
WXX的博客
08-17 453
箭头函数 使用 <script> //箭头函数:也是一种定义函数的方式 //1 定义函数的方式:function const aaa = function () { } //2 对象字面量中定义函数 const obj = { bbb:function () { }, bbb(){ } } //3.ES6中的箭头函数 const ccc =(参数列表) => { } 参数和返回值 <script&g
新手学习VUE踩坑之旅---methods里面使用箭头函数要注意this
qq_39293724的博客
12-19 3325
VUE的methods对象里面如果函数使用箭头函数会导致this指向的不是vue实例$vm 例子：想写一个点击事件：点击输入框的“x”,即可清空文本框的内容 首先为输入框增加一个ref属性（ref=“inputUser”），然后为“x”加一个点击事件（@click=“deleteInp”） methods中使用普通函数： methods: { deleteInp : func...
vue中生命周期函数
08-11
Vue中的生命周期函数包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed。beforeCreate是在Vue实例被创建之前调用的，此时data和methods还未初始化，不能访问DOM，可以在此函数中进行一些初始化的操作。created是在Vue实例被创建之后调用的，此时data和methods已经初始化完成，可以访问DOM，可以在此函数中请求数据、更新数据等操作。beforeMount是在Vue实例挂载到DOM之前调用的，此时模板还未编译成DOM，可以在此函数中进行一些准备工作。mounted是在Vue实例挂载到DOM之后调用的，此时模板已经编译成DOM，可以进行DOM操作。beforeUpdate是在数据更新之前调用的，可以在此函数中进行一些更新前的操作。updated是在数据更新之后调用的，可以在此函数中进行一些更新后的操作。beforeDestroy是在Vue实例销毁之前调用的，可以在此函数中进行一些清理工作。destroyed是在Vue实例销毁之后调用的，此时Vue实例已经完全销毁，可以进行一些最终的清理工作。123 #### 引用[.reference_title] - *1* *3* [Vue生命周期函数详解](https://blog.csdn.net/wen110898/article/details/120520844)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] - *2* [Vue 生命周期函数](https://blog.csdn.net/xyfck/article/details/126909930)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

请对长亭晚

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值