应避免在 methods 中使用箭头函数，因其无独立 this，会继承外层 undefined 的 this，导致访问实例属性或方法失败；须改用普通函数（es6 简写或 es5 function）。

直接避免在 methods 里用箭头函数，改用普通函数写法即可。这是最根本、最稳妥的做法。

为什么不能在 methods 中用箭头函数

Vue 在初始化时会自动把 methods 里的每个函数绑定到组件实例上，让 this 指向当前 Vue 实例。但箭头函数没有自己的 this，它会沿作用域链向上找定义时的外层 this —— 这个值在组件选项对象中通常是 undefined（严格模式）或全局对象（如 window），根本不是 Vue 实例。

结果就是：访问 this.message、this.$refs、this.getData() 全部报错或返回 undefined。

正确写法：统一使用普通函数

所有 methods 中的方法都应声明为标准函数，包括 ES5 function 或 ES6 方法简写（推荐）：

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

• ✅ 推荐（ES6 简写）：greet() { console.log(this.message) }
• ✅ 可用（ES5 function）：greet: function() { console.log(this.message) }
• ❌ 错误（箭头函数）：greet: () => { console.log(this.message) }

哪些地方可以安全用箭头函数

箭头函数不是“禁用”，而是“用错位置”。它适合出现在需要继承外层 this 的嵌套场景中：

• 数组方法回调：this.items.map(item => item.name)
• Promises 链式调用：fetch('/api').then(res => res.json()).then(data => this.list = data)
• setTimeout / setInterval 回调：setTimeout(() => this.loading = false, 500)

这些情况里，外层函数（比如 methods 里的某个方法）的 this 已被 Vue 正确绑定，箭头函数能自然继承，不会出问题。

额外检查点

除了 methods，以下 Vue 选项中也禁止使用箭头函数：

• computed 的 getter/setter
• watch 的回调函数
• 生命周期钩子（created、mounted、updated 等）

只要该选项的函数预期被 Vue 自动绑定 this，就不要用箭头函数 —— 文档明确提醒：“不应该使用箭头函数来定义 method 函数”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！