VUE - 箭头函数this

最新推荐文章于 2024-08-06 14:38:46 发布
最新推荐文章于 2024-08-06 14:38:46 发布
阅读量573 收藏 1
点赞数 2
文章标签： vue js javascript 类 bind
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/trustnature/article/details/121987877
版权
在Vue实例中，methods中的函数决定了this的指向。正常函数中，this会指向Vue实例，而在箭头函数中，由于箭头函数不绑定自己的this，导致其this通常指向上下文中的window对象，这可能导致this.a在箭头函数中为undefined。Vue官方文档建议避免在methods中使用箭头函数，以防止this的预期指向错误。
摘要由CSDN通过智能技术生成

对于正常函数，谁调用的它，this就指向谁，而箭头函数没有this，它的this指向一般就是上下文中，与谁调用它没关系。

但是在Vue实例中，methods中如果用的是正常函数，那么它的this就指向Vue实例；如果是箭头函数，this就指向window对象。

在Vue的官方文档是这么解释的：

methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this自动绑定为 Vue 实例。

注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。

除了回调函数中的 this ，其它地方的 this 均指向 Vue 实例

trustnature
关注
【Vue踩坑之一】箭头函数的this指向
FrequencyStar的博客
07-29 1351
【一】methods箭头函数的this指向 箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象 <body> <h1 id="app"> <span>{{message}}</span><br /> <button v-on:click="reverseMessage">逆转消息</button> </
Vue学习(7)-plugin、Vue-Cli、箭头函数、vue-router准备
qq_43294163的博客
07-22 551
一、vue的使用方法 创建vue时，当template和el同时存在时，会将template中的东西替换el中的东西。 要对.vue文件进行封装处理就需要安装vue-loader和vue-template-compiler. npm install vue-loader vue-template-compiler --save-dev 因为脚手架还没学到，现在这个形式好像是很接近脚手架的了。 App.vue //模版样式 <template> <div> &lt
Vue - 箭头函数 this
A_bad_horse的专栏
03-02 264
<body> <script> const obj = { aaa() { setTimeout(function() { console.log("t1", this) // window }) setTimeout(() => { console.log("t2",this) // obj对象 }) } } obj.a.
javascript 中 this 关键字详解
柯晓楠
08-06 1070
此时 bar 函数，也就是 obj 上的 foo 方法为什么又指向了全局对象呢，是因为 bar 方法此时是作为函数独立调用的，所以此时的场景属于默认绑定，而不是隐式绑定。执行时箭头函数中 this 是全局 window，首先打印出 window 上的属性 a 的值 20，箭头函数返回了一个原型上有个值为 50 的属性 a 的函数对象 func 给 bar；而 bind 方法是设置 this 为给定的值，并返回一个新的函数，且在调用新函数时，将给定参数列表作为原函数的参数序列的前若干项。
箭头函数 this
AgonyQAQ的博客
06-10 389
箭头函数中，是没有this的，所以写在箭头函数中的this，会自动向当前作用域的上一层作用域寻找，是否含有this，如果有就指代，没有就继续找上一层。所以setTimeout函数中的this指代的就是Vue实例对象vm。setTimeout箭头函数中没有this可以指代的对象。上一层作用域是Vue实例对象vm的监视属性watch。所以watch中的this指代的是Vue实例对象vm。JS的window对象调用setTimeout函数。setTimeout函数，是箭头函数。
vue中的箭头函数的this
wanghuohuo1998的博客
07-05 648
在vue中箭头函数没有自己的this，所以，当箭头函数中有this的时候他会往外找，从而确定它的this的值 vm.$watch('firstName',{ immediate:true, //若immediate为true则handler在初始化时，就会调用一次，以后就看firstName的改变了 handler(newValue,oldValue){ setTimeout(()=>{ //此处定时器的回调一定要写箭头函数 t
Vue 箭头函数 this 问题
qq_30436011的博客
08-26 2247
在一个普通函数中，this归属于函数的“拥有者”。由于我们是在vue组件里定义的，那么this归属于vue组件。接下来我将解释this的作用域。 大多数情况下你在vue里最好使用普通函数，特别是当你构建： data methods computed props watched props vue组件下的方法的时候应该用一个普通函数 在一个箭头函数里，this并不归属于函数的拥有者。 箭头函数的作用域被称为词法作用域(或静态作用域lexical scoping)。首先我们要明白在箭头函数中，this.
04-箭头函数.rar
11-06
在“04-箭头函数.rar”这个压缩包中，我们很可能会找到关于Vue-cli2的基础操作和配置的学习资料，同时会深入探讨箭头函数的使用。Vue-cli2是一个强大的脚手架工具，用于快速搭建Vue.js项目，而箭头函数则是编写Vue...
解析vue data不可以使用箭头函数问题
12-11
在这种情况下，由于箭头函数的`this` 不会指向Vue实例，而是`undefined`（在严格模式下），这会导致Vue无法正确地将返回的对象与实例关联起来，从而影响实例的数据响应性。 Vue的源码中，`data` 的处理过程如下： ...
04-箭头函数的缺点.md
03-31
总结而言，虽然箭头函数在很多场景下都很有用，但在需要访问arguments、动态改变this上下文、在对象方法中访问对象自身属性、在构造函数中创建实例、在Vue生命周期钩子或方法中访问组件实例等特定场景下，应该避免...
vue箭头函数 this
u012497072的博客
12-10 550
vue箭头函数 this 指向的是最靠近自己的外层this
详解vue中的computed的this指向问题
11-28
今天在写vue项目时，用到了computed计算属性，遇到了使用箭头函数出现this指向问题，这里记录下 1.箭头函数中的this 箭头函数内部的this是词法作用域，由上下文确定 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象 2.vue中的computed 使用箭头函数 list: () => { console.log(this) } 不使用箭头函数 allFigure: function() { console.log(this) }, 使用get() allFigure: { get() { console.log(this);
Vue中的methods配置项中的箭头函数this指向及相关源码分析
D-的博客
04-15 7388
之前在使用Vue时遇到一个问题，我们知道在Vue的methods中定义函数时，要想使用到Vue实例或者组件实例的this时，我们就不能使用箭头函数定义方法，因为箭头函数中的this是在函数定义时生成的，并不是函数调用使用时生成。但是我们如果使用了箭头函数，那么其中的this指向哪里呢?我刚开始也是以为肯定是指向Window的,这仅仅是局限于用script映入vue.js时才会指向Window,但其实在Vue-cli中，如果使用箭头函数定义了methods中的方法，那么this是指向undefined的。
vue2知识点：箭头函数和普通函数的this指向问题
刘大猫
06-24 4259
vue2知识点：箭头函数和普通函数的this指向问题
箭头函数中的this
萝卜@兔子的专栏
02-27 1500
箭头函数本身没有自己的this， 绑定定义时所在的作用域，而不是指向运行时所在的作用域。所以其内部的this指向定义该箭头函数时，外层代码块的this，即箭头函数的this指向固定化。（箭头函数的这个特性有利于封装回调函数） 由于箭头函数没有自己的this，所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。通过 call() 或 apply() 方法调用一...
vue箭头函数this作用域
wushen的博客
04-30 2315
在做vue项目时用到了axios，但是发现axios请求之后的回调函数里this并不指向当前vue实例，从而导致浏览器报错。 出错代码及结果: created : function(){ axios.get('static/data.json').then(function(res){ console.log(this) //undefined ...
vue中箭头函数this的指向
qq_60891094的博客
09-09 717
vue中箭头函数this的指向
js---遍历的4种方法 & 箭头函数=＞
时光里的博客
09-07 8014
常规遍历方法 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
vue3箭头函数获取返回值
最新发布
09-20
在 Vue3 中，箭头函数（Arrow Functions）可以非常简洁地定义回调函数，并且它们的 `this` 指向通常更直观。当你需要在模板中或者数据处理函数中获取箭头函数的结果时，只需要按照常规 JavaScript 的语法编写即可。 例如，假设你有一个计算属性，你可以这样定义： ```html <template> <div>{{ multiplyNumbers(2, 3) }}</div> </template> <script setup> import { ref } from 'vue'; const multiplyNumbers = (num1, num2) => { return num1 * num2; }; </script> ``` 在这个例子中，`multiplyNumbers` 就是一个箭头函数，它接受两个参数并返回它们的乘积。在模板中，`{{ multiplyNumbers(2, 3) }}`会显示6，因为这是该函数的返回值。 如果你需要将结果绑定到一个变量上： ```html <template> <div>{{ result }}</div> </template> <script setup> import { ref } from 'vue'; const multiplyNumbers = (num1, num2) => num1 * num2; const result = ref(multiplyNumbers(2, 3)); </script> ``` 在这里，`result` 是一个响应式变量，它的值就是 `multiplyNumbers` 函数的返回值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值