Skip to content

add warnings about using arrow functions on instance properties #448

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 3, 2016
Merged

add warnings about using arrow functions on instance properties #448

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 16 additions & 4 deletions src/api/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -347,6 +347,8 @@ type: api
})
```

<p class="tip">Note that __you should not use an arrow function with the `data` property__ (e.g. `data: () => { return { a: this.myProp }}`). The reason is arrow functions bind the parent context, so `this` will not be the Vue instance as you expect and `this.myProp` will be undefined.</p>

- **See also:** [Reactivity in Depth](/guide/reactivity.html)

### props
Expand Down Expand Up @@ -418,6 +420,8 @@ type: api

Computed properties to be mixed into the Vue instance. All getters and setters have their `this` context automatically bound to the Vue instance.

<p class="tip">Note that __you should not use an arrow function to define a computed property__ (e.g. `aDouble: () => this.a * 2`). The reason is arrow functions bind the parent context, so `this` will not be the Vue instance as you expect and `this.a` will be undefined.</p>

Computed properties are cached, and only re-computed on reactive dependency changes.

- **Example:**
Expand Down Expand Up @@ -458,6 +462,8 @@ type: api

Methods to be mixed into the Vue instance. You can access these methods directly on the VM instance, or use them in directive expressions. All methods will have their `this` context automatically bound to the Vue instance.

<p class="tip">Note that __you should not use an arrow function to define a method__ (e.g. `plus: () => this.a++`). The reason is arrow functions bind the parent context, so `this` will not be the Vue instance as you expect and `this.a` will be undefined.</p>

- **Example:**

```js
Expand Down Expand Up @@ -488,16 +494,18 @@ type: api
``` js
var vm = new Vue({
data: {
a: 1
a: 1,
b: 2,
c: 3
},
watch: {
'a': function (val, oldVal) {
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// string method name
'b': 'someMethod',
b: 'someMethod',
// deep watcher
'c': {
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
}
Expand All @@ -506,6 +514,8 @@ type: api
vm.a = 2 // -> new: 2, old: 1
```

<p class="tip">Note that __you should not use an arrow function to define a watcher__ (e.g. `searchQuery: newValue => this.updateAutocomplete(newValue)`). The reason is arrow functions bind the parent context, so `this` will not be the Vue instance as you expect and `this.updateAutocomplete` will be undefined.</p>

- **See also:** [Instance Methods - vm.$watch](#vm-watch)

## Options / DOM
Expand Down Expand Up @@ -559,6 +569,8 @@ type: api

## Options / Lifecycle Hooks

All lifecycle hooks automatically have their `this` context bound to the instance, so that you can access data, computed properties, and methods. This means __you should not use an arrow function to define a lifecycle method__ (e.g. `created: () => this.fetchTodos()`). The reason is arrow functions bind the parent context, so `this` will not be the Vue instance as you expect and `this.fetchTodos` will be undefined.

### beforeCreate

- **Type:** `Function`
Expand Down
2 changes: 2 additions & 0 deletions src/guide/instance.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,8 @@ vm.$watch('a', function (newVal, oldVal) {
})
```

<p class="tip">Note that __you should not use arrow functions on an instance property or callback__ (e.g. `vm.$watch('a', newVal => this.myMethod())`). The reason is arrow functions bind the parent context, so `this` will not be the Vue instance as you expect and `this.myMethod` will be undefined.</p>

Consult the [API reference](/api) for the full list of instance properties and methods.

## Instance Lifecycle Hooks
Expand Down