vue2 computed 中不要写箭头函数

原创 已于 2024-01-11 15:01:45 修改 · 347 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

于 2023-07-28 16:34:10 首次发布
在Vue2的computed属性中，由于需要访问组件实例的上下文，因此必须使用函数表达式而非箭头函数。箭头函数没有自己的this，会导致无法正确引用data中的数据，从而引发错误。理解这一点对于避免Vue应用中的常见问题至关重要。

在vue2中，computed中需要引用data里 数据，需要用到this， 所以在computed中不能使用箭头函数，否则会报错。

Vue2基础补充(箭头函数、for循环、修饰符、表单控制、v-model进阶、axios、计算属性、监听属性、组件)
AZURE060606的博客
04-28 1222
Vue 能够追踪计算属性的依赖关系，当依赖的数据发生变化时，相关的计算属性会自动更新。只有在依赖发生改变时，才会重新计算计算属性的值，否则会直接返回缓存的结果。es6 新增了箭头函数，箭头函数实例化的函数对象与正式的函数表达式创建的函数对象行为是相同的。：在实例初始化之后，数据观测和事件配置之前被调用，此时实例还未初始化完成。：实例销毁后调用，此时实例及其所有的指令被解绑，事件监听器被移除。：只处理自己的事件，父控件冒泡的事件不处理，：只处理自己的事件，子控件冒泡的事件不处理，
2020 零基础 Vue快速入门 Vue2.0使用ES6语法的箭头函数=> 对this作用域的理解 【整理】
超逸の学习技术博客
01-14 2612
文章目录1、引言2、简单介绍3、普通函数4、箭头函数 =>5、实例演示6、结束语 1、引言 最近，学Vue相关知识时，学到了axios，发现axios请求之后的回调函数里this并不指向当前vue实例，在浏览器按F12报了错，赶紧想着去解决问题，后面才知道原来还有箭头函数这个简便操作，一起来了解一下把~ 2、简单介绍 关于它们两个的比较，我就以请求一个随机获取笑话的api为例了，来说明它们的...
vue中的方法 methods 定义时不要使用箭头函数
热门推荐
hjh15827475896的博客
03-24 1万+
今天在vue中引入vuex的时候出现了错误，解决了一个多少时，总结如下： vuex 的使用： vuex就是一个状态管里中心 也好比一个仓库 细分可分为五个部分，这是我不考虑 module 分别是 state geters setter mutations actions state 就是要存入的数据 getters setters 就不用多说的，是获取和设置数据用的 mutation...
vue中箭头函数入门说明
ywy7777777的博客
06-05 1670
箭头函数：是一种定义函数的方式 一、无参 1、普通函数无参 var f = function(){ return a; } 2、箭头函数无参 var f =()= > a;//a为返回参数 二、 带参 1、普通函数带参 var sum = function(a, b) { return a+ b; }; 2、箭头函数带参 注:一个参数的时候是可以省略括号的如： （1）var fun = (a) => { return a* a } （2）var fun2 = a=> { return a*
vue2知识点：箭头函数和普通函数的this指向问题
刘大猫
06-24 4562
vue2知识点：箭头函数和普通函数的this指向问题
在 Vue3 中使用箭头函数，不同场景下的用法说明
繁若华尘的博客
02-21 728
合理选择函数类型，可以避免 this 指向错误，同时保持代码简洁性。
详解vue中的computed的this指向问题
11-28
2. **使用闭包变量**：在`data`选项中声明一个变量，存储Vue实例的引用，然后在箭头函数中使用这个变量。例如： ```javascript data() { return { message: 'Hello Vue!', self: this } }, computed: { ...
vue 3 学习笔记 (七)——vue3 中 computed 新用法
前端人的博客
11-25 5255
vue3 中 的 computed 的使用，由于 vue3 兼容 vue2 的选项式API，所以可以直接使用 vue2的写法，这篇文章主要介绍 vue3 中 computed 的新用法，对比 vue2 中的写法，让您快速掌握 vue3 中 computed 的新用法。 组合式 API 中使用 computed 时，需要先引入：import { computed } from "vue"。引入之后 computed 可以传入的参数有两种：回调函数和 options 。具体看看它是如何使用的？ 一、函数式写
Vue相关面试问答TOP2（能不能在method中使⽤箭头函数、如何定义组件的data、v-if 和 v-show的区别、computed、watch、methods的区别、axios的特点....）
weixin_48780364的博客
11-18 323
Vue相关面试题TOP2（能不能在method中使⽤箭头函数、如何定义组件的data、v-if 和 v-show的区别、computed、watch、methods的区别、axios的特点、如何解决⻚⾯刷新vuex被清空的问题、axios和ajax有什么不同、vue等单⻚⾯⽹站的优势和不⾜、使⽤mvvm设计模式有什么优势、如何编写可复⽤的组件）
【2022-8-24】vue2中使用箭头函数踩坑记录
lookingForw_4585的博客
08-24 718
vue2项目中使用箭头函数踩坑
解析vue data不可以使用箭头函数问题
12-11
首先需要明确，a() {}和 b: () => {}是不同的 let obj = { a() {}, // 相当于 a:function() {}, b: () => {} } 1 VUE.js 源码解析 注意此处只设计核心代码 这段代码也是UMD实现原理，本文这里不是重点，有兴趣的可以自行探究。 (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof
Vue中的methods配置项中的箭头函数this指向及相关源码分析
D-的博客
04-15 7644
之前在使用Vue时遇到一个问题，我们知道在Vue的methods中定义函数时，要想使用到Vue实例或者组件实例的this时，我们就不能使用箭头函数定义方法，因为箭头函数中的this是在函数定义时生成的，并不是函数调用使用时生成。但是我们如果使用了箭头函数，那么其中的this指向哪里呢?我刚开始也是以为肯定是指向Window的,这仅仅是局限于用script映入vue.js时才会指向Window,但其实在Vue-cli中，如果使用箭头函数定义了methods中的方法，那么this是指向undefined的。
vue的学习笔记（12）之箭头函数
肿肿的博客
02-02 6920
箭头函数1、箭头函数的使用2、箭头函数参数和返回值3、箭头函数中的this 1、箭头函数的使用 定义函数有三种方式： <script> //箭头函数：也是一种定义函数的方式 //1.定义函数的方式：function const aaa=function () { } //2.对象字面量中定义函数 const obj={ bbb: function () { }, ccc() { } } //3.es6中的箭头函数 // const ddd=(参
在vue2.x methods中使用ES6箭头函数踩的坑，所有方法里的this指向“a”中
经验之谈，不做搬运工
06-17 563
> 背景：vue2.5.2项目 > 定位： methods方法集 > 问题：在methods中使用了ES6箭头函数，this指向多了一层“a” ### 技术定义 > ES6箭头函数内部没有this指向，箭头函数内部this指向只能通过查找作用域链来决定，一旦使用箭头函数当前就不存在作用域链。 ### 问题分析 > this指向多了一层“a”，这里的a，并不是vue对象
ES6箭头函数--不能在computed用
AsaZyf的博客
12-25 884
箭头函数里面的this是根据上下文的,在computed里用箭头函数，由于找不到对应的内容，this会指向window，数据无法出现 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta name="viewport" content="width=de
vue中 computed 下使用箭头函数会报错
Leon的博客
11-29 4809
computed: { myPhone: () =&gt; { let num3 = this.mobile.slice(-4); let num1 = this.mobile.slice(0,-8); let str = `${num1}****${num3}`; return str; } } 这种...
深究为啥Vue管理的函数不能是箭头函数
m0_64567550的博客
11-20 1020
深究为啥Vue管理的函数不能是箭头函数
Vue2 中哪些地方不能使用箭头函数
CaseyWei
08-22 675
this 将会指向 undefined，经常导致 `Uncaught TypeError: Cannot read property of undefined` 或 `Uncaught TypeError: this.myMethod is not a function` 之类的错误。3.不应该使用箭头函数来定义 `计算属性 (computed)` 里面的函数。5.不应该使用箭头函数来定义 `过滤器 (filters)` 里面的函数。4.不应该使用箭头函数来定义 `监听器 (watch)` 里面的函数。
js---this、箭头函数
muzidigbig的博客
12-13 1251
函数的时候绑定，而不是在执行函数的时候绑定，所以this指向定义时所在的作用域的this（它只会从自己的作用域链的上一层沿用thi s）。箭头函数中的this引用的是最近作用域中的this；即向外层作用域中，一层层的查找直到this的定义。箭头函数中，this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是。 为什么class中的方法可以使使用箭头函数
VUE2箭头函数中怎么使用 this
最新发布
08-05
<think>在 Vue 2 中，箭头函数没有自己的 `this` 上下文，它会捕获其定义时所在上下文的 `this` 值。而在 Vue 组件中，我们通常希望 `this` 指向当前 Vue 实例，以便访问实例的数据、方法等。因此，在 Vue 2 中，我们需要特别注意箭头函数的使用场景。 ### 问题分析 根据引用[2][3][4][5]： - 普通函数：谁调用它，`this` 就指向谁。在 Vue 组件的方法中，普通函数的 `this` 会被 Vue 绑定到当前组件实例。 - 箭头函数：没有自己的 `this`，它会继承定义时所处上下文的 `this` 值。如果在 Vue 组件的选项（如 `methods`）中使用箭头函数，则 `this` 不会指向 Vue 实例，而是指向定义时的上下文（通常是外层作用域，可能是 `window` 或 `undefined`）。 ### 解决方案：在 Vue 2 中正确使用箭头函数 #### 1. 避免在 Vue 选项中使用箭头函数定义方法 在 `methods`、`computed`、`watch` 或生命周期钩子等选项中，避免使用箭头函数定义方法，因为这样会导致 `this` 不指向 Vue 实例。 ```javascript // 错误示例：在 methods 中使用箭头函数 export default { data() { return { count: 0 } }, methods: { increment: () => { // 这里的 this 不会指向 Vue 实例 this.count++; // 错误：this 为 undefined 或 window } } } ``` #### 2. 在回调函数中使用箭头函数（推荐） 当需要在回调函数（如定时器、事件监听器、Promise 等）中访问 Vue 实例时，可以使用箭头函数，因为箭头函数会捕获定义时的 `this`（即外层普通函数的 `this`，此时指向 Vue 实例）。 ```javascript export default { data() { return { count: 0 } }, methods: { startTimer() { // 在普通函数中，this 指向 Vue 实例 setInterval(() => { // 箭头函数继承 startTimer 的 this（即 Vue 实例） this.count++; // 正确：this 指向 Vue 实例 }, 1000); } } } ``` #### 3. 使用普通函数 + 变量保存 `this` 如果不使用箭头函数，可以在进入外层函数时保存 `this` 的引用，然后在回调函数中使用。 ```javascript export default { data() { return { count: 0 } }, methods: { startTimer() { const vm = this; // 保存 this 引用 setInterval(function() { vm.count++; // 通过 vm 访问 Vue 实例 }, 1000); } } } ``` ### 错误示例修正 假设有一个需求：在点击按钮后延迟 1 秒增加计数。 **错误写法（箭头函数在 methods 中定义）：** ```javascript methods: { handleClick: () => { setTimeout(() => { this.count++; // this 不指向实例，错误！ }, 1000); } } ``` **正确写法 1（普通函数 + 内部箭头函数）：** ```javascript methods: { handleClick() { // 普通函数 setTimeout(() => { this.count++; // 箭头函数继承 handleClick 的 this（实例） }, 1000); } } ``` **正确写法 2（普通函数 + 保存 this）：** ```javascript methods: { handleClick() { const vm = this; setTimeout(function() { vm.count++; // 通过 vm 访问 }, 1000); } } ``` ### 总结 - **Vue 选项方法**（`methods`、`computed` 等）：使用普通函数确保 `this` 指向实例。 - **嵌套回调函数**：使用箭头函数继承外层函数的 `this`（即 Vue 实例）。 - 箭头函数的 `this` 在定义时确定，普通函数的 `this` 在调用时确定[^2][^3]。 > **关键原则**：在 Vue 组件中，需要访问实例属性/方法的地方，确保函数内的 `this` 指向 Vue 实例。箭头函数在回调中非常有用，但避免在 Vue 选项顶层使用。 ### 相关问题 §§相关问题§§ 1. Vue 2 中为什么在 `methods` 里使用箭头函数会导致 `this` 指向错误？ 2. 如何在 Vue 2 的回调函数（如 setTimeout）中正确访问组件实例？ 3. Vue 2 和 Vue 3 在 `this` 绑定方面有哪些主要区别？</think>在 Vue 2 中，箭头函数没有自己的 `this` 上下文，它会捕获定义时所在上下文的 `this` 值（词法作用域）。这意味着在 Vue 组件中使用箭头函数时，`this` 不会自动指向 Vue 实例，可能导致访问数据或方法时出错。以下是正确使用箭头函数的解决方案： ### 解决方案：3 种正确使用 `this` 的方式 #### 1. 在回调函数中使用箭头函数（推荐） ```javascript export default { data() { return { user: { name: "张三", age: 25 } } }, methods: { fetchData() { // 正确：箭头函数继承 fetchData 的 this（即 Vue 实例） axios.get('/api/user').then(response => { this.user = response.data; // ✅ 正常访问 this.user }); } } } ``` #### 2. 使用普通函数 + 变量保存 `this` ```javascript export default { methods: { updateUser() { const vm = this; // 保存 Vue 实例引用 // 在需要访问 this 的回调中使用 vm setTimeout(function() { vm.user.age = 30; // ✅ 通过 vm 访问 }, 1000); } } } ``` #### 3. 使用 `.bind()` 显式绑定（不推荐，较繁琐） ```javascript export default { methods: { processData: function() { // 显式绑定 this const boundFunction = function() { this.user.name = "李四"; }.bind(this); boundFunction(); } } } ``` ### ⚠️ 错误用法示例 ```javascript // 错误：在 methods 中直接使用箭头函数 methods: { errorExample: () => { console.log(this.user); // ❌ this 指向 Window 或 undefined } } // 错误：在 Vue 选项顶层使用箭头函数 created: () => { this.loadData(); // ❌ this 不指向实例 } ``` ### 使用场景建议 | **场景** | **推荐写法** | **原因** | |------------------------|-------------------|-----------------------------| | 组件选项 (methods/data等) | 普通函数 | `this` 自动绑定到 Vue 实例 [^4] | | 异步回调 (setTimeout 等) | 箭头函数 | 继承外层函数的 `this` | | 事件处理器 | 普通函数 | 保持 Vue 的自动绑定特性 | | 嵌套函数内的回调 | 箭头函数 | 避免多层 `this` 指向问题 | ### 原理说明 - **箭头函数**：没有自己的 `this`，继承定义时所在上下文的 `this` 值（词法作用域）[^2][^3] - **普通函数**：`this` 由调用方式决定，在 Vue 中被自动绑定到当前实例[^5] - 在 Vue 生命周期钩子和方法中，普通函数的 `this` 会被 Vue 自动绑定到组件实例[^1] > **实际应用示例**： > ```javascript > export default { > data() { > return { logs: [] } > }, > mounted() { > // 正确：在生命周期钩子中使用普通函数 > window.addEventListener('resize', this.handleResize); > }, > methods: { > handleResize() { // 普通函数 > // ✅ this 指向 Vue实例 > this.logs.push(`Resized at ${new Date()}`); > }, > fetchData() { > // 正确：在回调中使用箭头函数 > axios.get('/data').then(response => { > this.logs = response.data; // ✅ 继承外层 this > }); > } > } > } > ``` ### 总结关键点 1. **避免在 Vue 选项（methods/data等）顶层使用箭头函数** 2. **回调函数优先使用箭头函数**（继承外层 `this`） 3. **组件方法使用普通函数**（保持 Vue 的自动绑定） 4. 复杂场景可使用 `const vm = this` 保存引用
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值