yeuimu
6c61a4e871
- Debian-based api image (bookworm-slim), docker/debian mirrors, prisma binaryTargets for openssl 3.0 - nginx: admin SPA under /admin, TLS via acme.sh (ZeroSSL) + auto-renewal cron, http->https redirect - prisma: add origin_goods.delisted migration, sync missing schema (good_image/tag_font_color/good_tags), fix users.createdAt Timestamptz - api: CORS wildcard reflection, helmet CORP cross-origin, price backfill in persistProductDetail, categoryIcon ancestor fallback, mediaByColor per-color gallery in public goods detail - admin: /admin base path (vite + router) - import-data.mjs: udt_name casting, serial sequence advance fix
69 lines
2.1 KiB
Markdown
69 lines
2.1 KiB
Markdown
---
|
|
title: Never Use Arrow Functions in Methods Option
|
|
impact: HIGH
|
|
impactDescription: Arrow functions prevent Vue from binding `this` to the component instance
|
|
type: capability
|
|
tags: [vue3, vue2, options-api, methods, this-binding]
|
|
---
|
|
|
|
# Never Use Arrow Functions in Methods Option
|
|
|
|
**Impact: HIGH** - Using arrow functions in the `methods` option causes `this` to be `undefined` or the wrong context, leading to runtime errors when trying to access component data, computed properties, or other methods.
|
|
|
|
Arrow functions lexically bind `this` from their enclosing scope, not from the object they're defined on. Vue's `methods` option requires regular functions so Vue can bind `this` to the component instance.
|
|
|
|
## Task Checklist
|
|
|
|
- [ ] Always use regular function syntax for methods in Options API
|
|
- [ ] If using ES6 shorthand, use method shorthand (preferred)
|
|
- [ ] Arrow functions ARE allowed inside methods for callbacks
|
|
|
|
**Incorrect:**
|
|
```javascript
|
|
export default {
|
|
data() {
|
|
return { count: 0 }
|
|
},
|
|
methods: {
|
|
// WRONG: Arrow function - `this` will be undefined
|
|
increment: () => {
|
|
this.count++ // Error: Cannot read property 'count' of undefined
|
|
},
|
|
// WRONG: Arrow function assigned to property
|
|
decrement: () => {
|
|
this.count--
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
**Correct:**
|
|
```javascript
|
|
export default {
|
|
data() {
|
|
return { count: 0 }
|
|
},
|
|
methods: {
|
|
// CORRECT: ES6 method shorthand (preferred)
|
|
increment() {
|
|
this.count++ // Works! this refers to component instance
|
|
},
|
|
// CORRECT: Traditional function expression
|
|
decrement: function() {
|
|
this.count--
|
|
},
|
|
// Arrow functions ARE fine for callbacks INSIDE methods
|
|
fetchData() {
|
|
fetch('/api/data')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
this.data = data // Arrow function inherits `this` from fetchData
|
|
})
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
## Reference
|
|
- [Vue.js Methods - Avoid Arrow Functions](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#methods)
|