Skip to content

Commit 11c0d8c

Browse files
committed
add class property caveat in readme
1 parent c6f42f7 commit 11c0d8c

File tree

1 file changed

+25
-1
lines changed

1 file changed

+25
-1
lines changed

README.md

+25-1
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,9 @@ new Vue({
163163

164164
vue-class-component collects class properties as Vue instance data by instantiating the original constructor under the hood. While we can define instance data like native class manner, we sometimes need to know how it works.
165165

166-
For example, if you define an arrow function as a class property and access `this` in it, it will not work. This is because `this` is just a proxy object to Vue instance when initializing class properties:
166+
#### `this` value in property
167+
168+
If you define an arrow function as a class property and access `this` in it, it will not work. This is because `this` is just a proxy object to Vue instance when initializing class properties:
167169

168170
```js
169171
@Component
@@ -192,6 +194,28 @@ class MyComp extends Vue {
192194
}
193195
```
194196

197+
#### `undefined` will not be reactive
198+
199+
To take consistency between the decorator behavior of Babel and TypeScript, vue-class-component does not make reactive the class property that has `undefined` as initial value. You should use `null` as initial value or use `data` hook to initialize `undefined` property instead.
200+
201+
```js
202+
@Component
203+
class MyComp extends Vue {
204+
// Will not be reactive
205+
foo = undefined
206+
207+
// Will be reactive
208+
bar = null
209+
210+
data () {
211+
return {
212+
// Will be reactive
213+
baz: undefined
214+
}
215+
}
216+
}
217+
```
218+
195219
### Build the Example
196220

197221
``` bash

0 commit comments

Comments
 (0)