Data, Methods & This

## Two kinds of this JavaScript functions get `this` in two different ways: - A **regular function** (`function () {}` or the method shorthand `save() {}`) receives `this` **when it is called**, and `fn.bind(obj)` can fix it permanently. - An **arrow function** (`() => {}`) has **no `this` of its own**. It uses the `this` of the surrounding scope at the place it was written — **lexical** `this` — and neither `bind`, `call` nor `apply` can change it. In a Vue single-file component, the `<script>` block is an ES module. At module top level, `this` is `undefined`, and inside an object literal it is still the module's `this`, not the object. ## What Vue 3 binds, and how When an Options API instance is created, Vue binds the component's functions to the **instance proxy** — the object you know as `this`: | Option | How Vue passes the instance | Arrow function works? | |---|---|---| | `methods` | Each function is `bind`-ed to the instance once | No — `this` stays lexical | | Lifecycle hooks (`created`, `mounted`, …) | Each hook is bound to the instance | No | | `watch` handlers | Called with the instance as `this` | No | | `data` | Called with `this` **and** the instance as first argument | Yes, via the argument | | `computed` getters | Bound, **and** given the instance as first argument | Yes, via the argument | The Vue docs state it for each: avoid arrow functions when declaring methods, watch callbacks and lifecycle hooks, because they will not have access to the instance via `this`. For `data` and `computed`, the docs show the argument form: `data: (vm) => ({ a: vm.myProp })`. ## What the failure looks like ```js export default { data: () => ({ saving: false }), // fine: uses no this methods: { save: () => { this.saving = true } // TypeError: this is undefined }, mounted: () => { this.save() } // same TypeError } ``` The error appears only when the function is called, not when the component compiles, so the component may render and fail on the first click. ## Why auto-binding is useful Because each method is bound once at creation, **a method carries its instance wherever it is passed**: 1. `setTimeout(this.tick, 1000)` — `tick` still sees the component. 2. `window.addEventListener('resize', this.onResize)` — and the same reference can be passed to `removeEventListener` later, because it is one stable bound function per instance. 3. Passing `this.validate` as a callback into a helper or a child component's prop. Without binding, each of these would need a wrapper such as `() => this.tick()`. ## Where arrow functions are right - **Inside** a method or hook: `fetch(url).then(res => { this.items = res })` — the arrow inherits the method's `this`, which is the instance. - Inline template handlers: `@click="() => select(item)"` — template expressions are compiled against the instance, so no `this` is involved. - The `data` and computed argument form, where the instance arrives as a parameter. ## Handlers named by string The `watch` option also accepts a **method name as a string**: `watch: { query: 'search' }` runs `this.search` when `query` changes. Vue looks the name up among the instance's bound methods, so the handler gets the correct `this` without any function literal in the `watch` block. If the name does not match a method, development builds warn `Invalid watch handler specified by key "search"`. In legacy code this form is a useful way to sidestep the arrow problem entirely: the logic lives in a normal method, and the watcher just points at it. ## Reading an older component When you inherit an options component that fails with `Cannot read properties of undefined` on `this`, look for arrow functions at the top level of `methods`, hooks and `watch`. Convert them to the method shorthand; leave arrows nested inside method bodies as they are. A related dev warning — `Method "save" has type "undefined" in the component definition. Did you reference the function correctly?` — means a `methods` entry is not a function at all, typically a misspelled import.