@@ -57,7 +57,7 @@ const { ref, reactive } = vueCompositionApi
57
57
To let TypeScript properly infer types inside Vue component options, you need to define components with ` defineComponent `
58
58
59
59
``` ts
60
- import { defineComponent } from ' @vue/composition-api' ;
60
+ import { defineComponent } from ' @vue/composition-api'
61
61
62
62
const ComponentA = defineComponent ({
63
63
// type inference enabled
@@ -77,8 +77,8 @@ To support TSX, create a declaration file with following content in your project
77
77
78
78
``` ts
79
79
// file: shim-tsx.d.ts
80
- import Vue , { VNode } from ' vue' ;
81
- import { ComponentRenderProxy } from ' @vue/composition-api' ;
80
+ import Vue , { VNode } from ' vue'
81
+ import { ComponentRenderProxy } from ' @vue/composition-api'
82
82
83
83
declare global {
84
84
namespace JSX {
@@ -87,10 +87,10 @@ declare global {
87
87
// tslint:disable no-empty-interface
88
88
interface ElementClass extends ComponentRenderProxy {}
89
89
interface ElementAttributesProperty {
90
- $props: any ; // specify the property name to use
90
+ $props: any // specify the property name to use
91
91
}
92
92
interface IntrinsicElements {
93
- [elem : string ]: any ;
93
+ [elem : string ]: any
94
94
}
95
95
}
96
96
}
@@ -117,27 +117,27 @@ You can check the [benchmark results](https://antfu.github.io/vue-composition-ap
117
117
``` js
118
118
const state = reactive ({
119
119
list: [ref (0 )],
120
- });
120
+ })
121
121
// no unwrap, `.value` is required
122
- state .list [0 ].value === 0 ; // true
122
+ state .list [0 ].value === 0 // true
123
123
124
- state .list .push (ref (1 ));
124
+ state .list .push (ref (1 ))
125
125
// no unwrap, `.value` is required
126
- state .list [1 ].value === 1 ; // true
126
+ state .list [1 ].value === 1 // true
127
127
```
128
128
129
129
#### ** Should NOT** use ` ref ` in a plain object when working with ` Array ` :
130
130
131
131
``` js
132
132
const a = {
133
133
count: ref (0 ),
134
- };
134
+ }
135
135
const b = reactive ({
136
136
list: [a], // `a.count` will not unwrap!!
137
- });
137
+ })
138
138
139
139
// no unwrap for `count`, `.value` is required
140
- b .list [0 ].count .value === 0 ; // true
140
+ b .list [0 ].count .value === 0 // true
141
141
```
142
142
143
143
``` js
@@ -147,31 +147,31 @@ const b = reactive({
147
147
count: ref (0 ), // no unwrap!!
148
148
},
149
149
],
150
- });
150
+ })
151
151
152
152
// no unwrap for `count`, `.value` is required
153
- b .list [0 ].count .value === 0 ; // true
153
+ b .list [0 ].count .value === 0 // true
154
154
```
155
155
156
156
#### ** Should** always use ` ref ` in a ` reactive ` when working with ` Array ` :
157
157
158
158
``` js
159
159
const a = reactive ({
160
160
count: ref (0 ),
161
- });
161
+ })
162
162
const b = reactive ({
163
163
list: [a],
164
- });
164
+ })
165
165
// unwrapped
166
- b .list [0 ].count === 0 ; // true
166
+ b .list [0 ].count === 0 // true
167
167
168
168
b .list .push (
169
169
reactive ({
170
170
count: ref (1 ),
171
171
})
172
- );
172
+ )
173
173
// unwrapped
174
- b .list [1 ].count === 1 ; // true
174
+ b .list [1 ].count === 1 // true
175
175
```
176
176
177
177
### :warning : ` reactive ` *** mutates*** the original object
@@ -198,18 +198,18 @@ String ref && return it from `setup()`:
198
198
<script >
199
199
export default {
200
200
setup () {
201
- const root = ref (null );
201
+ const root = ref (null )
202
202
203
203
onMounted (() => {
204
204
// the DOM element will be assigned to the ref after initial render
205
- console .log (root .value ); // <div/>
206
- });
205
+ console .log (root .value ) // <div/>
206
+ })
207
207
208
208
return {
209
209
root,
210
- };
210
+ }
211
211
},
212
- };
212
+ }
213
213
</script >
214
214
```
215
215
@@ -219,22 +219,22 @@ String ref && return it from `setup()` && Render Function / JSX:
219
219
``` jsx
220
220
export default {
221
221
setup () {
222
- const root = ref (null );
222
+ const root = ref (null )
223
223
224
224
onMounted (() => {
225
225
// the DOM element will be assigned to the ref after initial render
226
- console .log (root .value ); // <div/>
227
- });
226
+ console .log (root .value ) // <div/>
227
+ })
228
228
229
229
return {
230
230
root,
231
- };
231
+ }
232
232
},
233
233
render () {
234
234
// with JSX
235
- return () => < div ref= " root" / > ;
235
+ return () => < div ref= " root" / >
236
236
},
237
- };
237
+ }
238
238
```
239
239
240
240
:x : Function ref:
@@ -247,13 +247,13 @@ export default {
247
247
<script >
248
248
export default {
249
249
setup () {
250
- const root = ref (null );
250
+ const root = ref (null )
251
251
252
252
return {
253
253
root,
254
- };
254
+ }
255
255
},
256
- };
256
+ }
257
257
</script >
258
258
```
259
259
@@ -262,17 +262,17 @@ export default {
262
262
``` jsx
263
263
export default {
264
264
setup () {
265
- const root = ref (null );
265
+ const root = ref (null )
266
266
267
267
return () =>
268
268
h (' div' , {
269
269
ref: root,
270
- });
270
+ })
271
271
272
272
// with JSX
273
- return () => < div ref= {root} / > ;
273
+ return () => < div ref= {root} / >
274
274
},
275
- };
275
+ }
276
276
```
277
277
278
278
If you really want to use template refs in this case, you can access ` vm.$refs ` via ` SetupContext.refs ` .
@@ -282,34 +282,34 @@ If you really want to use template refs in this case, you can access `vm.$refs`
282
282
``` js
283
283
export default {
284
284
setup (initProps , setupContext ) {
285
- const refs = setupContext .refs ;
285
+ const refs = setupContext .refs
286
286
onMounted (() => {
287
287
// the DOM element will be assigned to the ref after initial render
288
- console .log (refs .root ); // <div/>
289
- });
288
+ console .log (refs .root ) // <div/>
289
+ })
290
290
291
291
return () =>
292
292
h (' div' , {
293
293
ref: ' root' ,
294
- });
294
+ })
295
295
296
296
// with JSX
297
- return () => < div ref= " root" / > ;
297
+ return () => < div ref= " root" / >
298
298
},
299
- };
299
+ }
300
300
```
301
301
302
302
You may also need to augment the ` SetupContext ` when working with TypeScript:
303
303
304
304
``` ts
305
- import Vue from ' vue' ;
306
- import VueCompositionApi from ' @vue/composition-api' ;
305
+ import Vue from ' vue'
306
+ import VueCompositionApi from ' @vue/composition-api'
307
307
308
- Vue .use (VueCompositionApi );
308
+ Vue .use (VueCompositionApi )
309
309
310
310
declare module ' @vue/composition-api' {
311
311
interface SetupContext {
312
- readonly refs: { [key : string ]: Vue | Element | Vue [] | Element [] };
312
+ readonly refs: { [key : string ]: Vue | Element | Vue [] | Element [] }
313
313
}
314
314
}
315
315
```
@@ -319,19 +319,19 @@ declare module '@vue/composition-api' {
319
319
Even if there is no definitive Vue 3 API for SSR yet, this plugin implements the ` onServerPrefetch ` lifecycle hook that allows you to use the ` serverPrefetch ` hook found in the classic API.
320
320
321
321
``` js
322
- import { onServerPrefetch } from ' @vue/composition-api' ;
322
+ import { onServerPrefetch } from ' @vue/composition-api'
323
323
324
324
export default {
325
325
setup (props , { ssrContext }) {
326
- const result = ref ();
326
+ const result = ref ()
327
327
328
328
onServerPrefetch (async () => {
329
- result .value = await callApi (ssrContext .someId );
330
- });
329
+ result .value = await callApi (ssrContext .someId )
330
+ })
331
331
332
332
return {
333
333
result,
334
- };
334
+ }
335
335
},
336
- };
336
+ }
337
337
```
0 commit comments