Skip to content

Commit 65b4ca7

Browse files
committed
docs: clean up
1 parent 01a036f commit 65b4ca7

File tree

1 file changed

+53
-53
lines changed

1 file changed

+53
-53
lines changed

README.md

Lines changed: 53 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ const { ref, reactive } = vueCompositionApi
5757
To let TypeScript properly infer types inside Vue component options, you need to define components with `defineComponent`
5858

5959
```ts
60-
import { defineComponent } from '@vue/composition-api';
60+
import { defineComponent } from '@vue/composition-api'
6161

6262
const ComponentA = defineComponent({
6363
// type inference enabled
@@ -77,8 +77,8 @@ To support TSX, create a declaration file with following content in your project
7777

7878
```ts
7979
// 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'
8282

8383
declare global {
8484
namespace JSX {
@@ -87,10 +87,10 @@ declare global {
8787
// tslint:disable no-empty-interface
8888
interface ElementClass extends ComponentRenderProxy {}
8989
interface ElementAttributesProperty {
90-
$props: any; // specify the property name to use
90+
$props: any // specify the property name to use
9191
}
9292
interface IntrinsicElements {
93-
[elem: string]: any;
93+
[elem: string]: any
9494
}
9595
}
9696
}
@@ -117,27 +117,27 @@ You can check the [benchmark results](https://antfu.github.io/vue-composition-ap
117117
```js
118118
const state = reactive({
119119
list: [ref(0)],
120-
});
120+
})
121121
// no unwrap, `.value` is required
122-
state.list[0].value === 0; // true
122+
state.list[0].value === 0 // true
123123

124-
state.list.push(ref(1));
124+
state.list.push(ref(1))
125125
// no unwrap, `.value` is required
126-
state.list[1].value === 1; // true
126+
state.list[1].value === 1 // true
127127
```
128128

129129
#### **Should NOT** use `ref` in a plain object when working with `Array`:
130130

131131
```js
132132
const a = {
133133
count: ref(0),
134-
};
134+
}
135135
const b = reactive({
136136
list: [a], // `a.count` will not unwrap!!
137-
});
137+
})
138138

139139
// no unwrap for `count`, `.value` is required
140-
b.list[0].count.value === 0; // true
140+
b.list[0].count.value === 0 // true
141141
```
142142

143143
```js
@@ -147,31 +147,31 @@ const b = reactive({
147147
count: ref(0), // no unwrap!!
148148
},
149149
],
150-
});
150+
})
151151

152152
// no unwrap for `count`, `.value` is required
153-
b.list[0].count.value === 0; // true
153+
b.list[0].count.value === 0 // true
154154
```
155155

156156
#### **Should** always use `ref` in a `reactive` when working with `Array`:
157157

158158
```js
159159
const a = reactive({
160160
count: ref(0),
161-
});
161+
})
162162
const b = reactive({
163163
list: [a],
164-
});
164+
})
165165
// unwrapped
166-
b.list[0].count === 0; // true
166+
b.list[0].count === 0 // true
167167

168168
b.list.push(
169169
reactive({
170170
count: ref(1),
171171
})
172-
);
172+
)
173173
// unwrapped
174-
b.list[1].count === 1; // true
174+
b.list[1].count === 1 // true
175175
```
176176

177177
### :warning: `reactive` ***mutates*** the original object
@@ -198,18 +198,18 @@ String ref && return it from `setup()`:
198198
<script>
199199
export default {
200200
setup() {
201-
const root = ref(null);
201+
const root = ref(null)
202202
203203
onMounted(() => {
204204
// 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+
})
207207
208208
return {
209209
root,
210-
};
210+
}
211211
},
212-
};
212+
}
213213
</script>
214214
```
215215

@@ -219,22 +219,22 @@ String ref && return it from `setup()` && Render Function / JSX:
219219
```jsx
220220
export default {
221221
setup() {
222-
const root = ref(null);
222+
const root = ref(null)
223223

224224
onMounted(() => {
225225
// 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+
})
228228

229229
return {
230230
root,
231-
};
231+
}
232232
},
233233
render() {
234234
// with JSX
235-
return () => <div ref="root" />;
235+
return () => <div ref="root" />
236236
},
237-
};
237+
}
238238
```
239239

240240
:x: Function ref:
@@ -247,13 +247,13 @@ export default {
247247
<script>
248248
export default {
249249
setup() {
250-
const root = ref(null);
250+
const root = ref(null)
251251
252252
return {
253253
root,
254-
};
254+
}
255255
},
256-
};
256+
}
257257
</script>
258258
```
259259

@@ -262,17 +262,17 @@ export default {
262262
```jsx
263263
export default {
264264
setup() {
265-
const root = ref(null);
265+
const root = ref(null)
266266

267267
return () =>
268268
h('div', {
269269
ref: root,
270-
});
270+
})
271271

272272
// with JSX
273-
return () => <div ref={root} />;
273+
return () => <div ref={root} />
274274
},
275-
};
275+
}
276276
```
277277

278278
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`
282282
```js
283283
export default {
284284
setup(initProps, setupContext) {
285-
const refs = setupContext.refs;
285+
const refs = setupContext.refs
286286
onMounted(() => {
287287
// 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+
})
290290

291291
return () =>
292292
h('div', {
293293
ref: 'root',
294-
});
294+
})
295295

296296
// with JSX
297-
return () => <div ref="root" />;
297+
return () => <div ref="root" />
298298
},
299-
};
299+
}
300300
```
301301

302302
You may also need to augment the `SetupContext` when working with TypeScript:
303303

304304
```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'
307307

308-
Vue.use(VueCompositionApi);
308+
Vue.use(VueCompositionApi)
309309

310310
declare module '@vue/composition-api' {
311311
interface SetupContext {
312-
readonly refs: { [key: string]: Vue | Element | Vue[] | Element[] };
312+
readonly refs: { [key: string]: Vue | Element | Vue[] | Element[] }
313313
}
314314
}
315315
```
@@ -319,19 +319,19 @@ declare module '@vue/composition-api' {
319319
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.
320320

321321
```js
322-
import { onServerPrefetch } from '@vue/composition-api';
322+
import { onServerPrefetch } from '@vue/composition-api'
323323

324324
export default {
325325
setup (props, { ssrContext }) {
326-
const result = ref();
326+
const result = ref()
327327

328328
onServerPrefetch(async () => {
329-
result.value = await callApi(ssrContext.someId);
330-
});
329+
result.value = await callApi(ssrContext.someId)
330+
})
331331

332332
return {
333333
result,
334-
};
334+
}
335335
},
336-
};
336+
}
337337
```

0 commit comments

Comments
 (0)