Skip to content
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

Jump to bottom

feat(shallowReadonly): add shallowReadonly and set computed to be shallowReadonly #447

Merged
merged 5 commits into from
Jul 22, 2020
Merged

feat(shallowReadonly): add shallowReadonly and set computed to be shallowReadonly #447

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
195b622
feat(shallowReadonly): add shallowReadonly and set computed to be sha…
pikax Jul 20, 2020
4feffec
chore: fix tests
pikax Jul 20, 2020
17f58aa
chore: readme
pikax Jul 21, 2020
537cfd0
chore:restore formatting
pikax Jul 21, 2020
30e68fa
docs: update zh-CN README
antfu Jul 21, 2020
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
46 changes: 23 additions & 23 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,13 +38,15 @@ import { ref, reactive } from '@vue/composition-api'
Include `@vue/composition-api` after Vue and it will install itself automatically.

<!--cdn-links-start-->

```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script>
<script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.0.0-beta.4"></script>
```

<!--cdn-links-end-->

`@vue/composition-api` will be exposed to global variable `window.VueCompositionAPI`.
`@vue/composition-api` will be exposed to global variable `window.VueCompositionAPI`.

```ts
const { ref, reactive } = VueCompositionAPI
Expand All @@ -68,8 +70,6 @@ export default defineComponent({

To make JSX/TSX work with `@vue/composition-api`, check out [babel-preset-vca-jsx](https://github.com/luwanquan/babel-preset-vca-jsx) by [@luwanquan](https://github.com/luwanquan).



## SSR

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.
Expand All @@ -78,7 +78,7 @@ Even if there is no definitive Vue 3 API for SSR yet, this plugin implements the
import { onServerPrefetch } from '@vue/composition-api'

export default {
setup (props, { ssrContext }) {
setup(props, { ssrContext }) {
const result = ref()

onServerPrefetch(async () => {
Expand All @@ -88,8 +88,8 @@ export default {
return {
result,
}
},
};
}
}
```

## Limitations
Expand Down Expand Up @@ -124,7 +124,6 @@ state.list[1].value === 1 // true
❌ <b>Should NOT</b> use <code>ref</code> in a plain object when working with <code>Array</code>
</summary>


```js
const a = {
count: ref(0),
Expand Down Expand Up @@ -162,8 +161,8 @@ const a = reactive({
list: [
reactive({
count: ref(0),
})
],
}),
]
})
// unwrapped
a.list[0].count === 0 // true
Expand All @@ -179,7 +178,6 @@ a.list[1].count === 1 // true

</details>


### Template Refs

<details>
Expand Down Expand Up @@ -212,7 +210,6 @@ a.list[1].count === 1 // true

</details>


<details>
<summary>
✅ String ref && return it from <code>setup()</code> && Render Function / JSX
Expand All @@ -238,8 +235,8 @@ export default {
},
}
```
</details>

</details>

<details>
<summary>
Expand All @@ -266,7 +263,6 @@ export default {

</details>


<details>
<summary>
❌ Render Function / JSX in <code>setup()</code>
Expand Down Expand Up @@ -301,7 +297,6 @@ export default {

If you really want to use template refs in this case, you can access `vm.$refs` via `SetupContext.refs`


```jsx
export default {
setup(initProps, setupContext) {
Expand Down Expand Up @@ -347,7 +342,6 @@ declare module '@vue/composition-api' {

> :bulb: In Vue 3, it will return an new proxy object.


</details>

### Watch
Expand All @@ -359,11 +353,11 @@ declare module '@vue/composition-api' {

```js
watch(() => {
/* ... */
/* ... */
}, {
immediate: true,
onTrack() {}, // not available
onTrigger() {}, // not available
onTrack() {}, // not available
onTrigger() {}, // not available
})
```

Expand All @@ -389,18 +383,26 @@ app2.component('Bar', Bar) // equivalent to Vue.use('Bar', Bar)

</details>

### shallowReadonly

<details>
<summary>
⚠️ <code>shallowReadonly()</code> will create a new object and with the same root properties, new properties added will <b>not</b> be readonly or reactive.
</summary>

> :bulb: In Vue 3, it will return an new proxy object.

</details>

### Missing APIs

The following APIs introduced in Vue 3 are not available in this plugin.

- `readonly`
- `shallowReadonly`
- `defineAsyncComponent`
- `onRenderTracked`
- `onRenderTriggered`
- `isProxy`
- `isReadonly`
- `isVNode`

### Reactive APIs in `data()`
Expand All @@ -415,18 +417,16 @@ export default {
data() {
return {
// will result { a: { value: 1 } } in template
a: ref(1)
a: ref(1),
}
},
}
```

</details>


### Performance Impact

Due the the limitation of Vue2's public API. `@vue/composition-api` inevitably introduced some extract costs. It shouldn't bother you unless in extreme environments.

You can check the [benchmark results](https://antfu.github.io/vue-composition-api-benchmark-results/) for more details.

73 changes: 41 additions & 32 deletions README.zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,17 +78,17 @@ export default defineComponent({
import { onServerPrefetch } from '@vue/composition-api'

export default {
setup (props, { ssrContext }) {
setup(props, { ssrContext }) {
const result = ref()

onServerPrefetch(async () => {
result.value = await callApi(ssrContext.someId)
})

return {
result,
result
}
},
}
}
```

Expand Down Expand Up @@ -130,27 +130,27 @@ state.list[1].value === 1 // true

```js
const a = {
count: ref(0),
count: ref(0)
}
const b = reactive({
list: [a], // `a.count` 不会自动展开!!
list: [a] // `a.count` 不会自动展开!!
})

// `count` 不会自动展开, 须使用 `.value`
b.list[0].count.value === 0; // true
b.list[0].count.value === 0 // true
```

```js
const b = reactive({
list: [
{
count: ref(0), // 不会自动展开!!
},
],
count: ref(0) // 不会自动展开!!
}
]
})

// `count` 不会自动展开, 须使用 `.value`
b.list[0].count.value === 0; // true
b.list[0].count.value === 0 // true
```

</details>
Expand All @@ -163,17 +163,17 @@ b.list[0].count.value === 0; // true

```js
const a = reactive({
count: ref(0),
count: ref(0)
})
const b = reactive({
list: [a],
list: [a]
})
// 自动展开
b.list[0].count === 0 // true

b.list.push(
reactive({
count: ref(1),
count: ref(1)
})
)
// 自动展开
Expand Down Expand Up @@ -205,9 +205,9 @@ b.list[1].count === 1; // true
})

return {
root,
root
}
},
}
}
</script>
```
Expand All @@ -232,13 +232,13 @@ export default {
})

return {
root,
root
}
},
render() {
// 使用 JSX
return () => <div ref="root" />
},
}
}
```

Expand All @@ -262,9 +262,9 @@ export default {
const root = ref(null)

return {
root,
root
}
},
}
}
</script>
```
Expand All @@ -289,7 +289,7 @@ export default {

// 使用 JSX
return () => <div ref={root} />
},
}
}
```

Expand Down Expand Up @@ -348,7 +348,7 @@ declare module '@vue/composition-api' {

此行为与 Vue 2 中的 `Vue.observable` 一致

> :bulb: 在 Vue 3 中，`reactive()` 会返回一个新的的代理对象.
> :bulb: 在 Vue 3 中，`reactive()` 会返回一个新的的代理对象

</details>

Expand All @@ -361,33 +361,42 @@ declare module '@vue/composition-api' {
</summary>

```js
watch(() => {
/* ... */
}, {
immediate: true,
onTrack() {}, // 不可用
onTrigger() {}, // 不可用
})
watch(
() => {
/* ... */
}, {
immediate: true,
onTrack() {}, // 不可用
onTrigger() {}, // 不可用
}
)
```

</details>

### shallowReadonly

<details>
<summary>
⚠️ <code>shallowReadonly()</code> 会返回一个新的浅拷贝对象，在此之后新加的字段<b>将不会</b>获得只读或响应式状态。
</summary>

> :bulb: 在 Vue 3 中，`shallowReadonly()` 会返回一个新的的代理对象

</details>

### 缺失的 API

以下在 Vue 3 新引入的 API ，在本插件中暂不适用：

- `readonly`
- `shallowReadonly`
- `defineAsyncComponent`
- `onRenderTracked`
- `onRenderTriggered`
- `customRef`
- `isProxy`
- `isReadonly`
- `isVNode`


### 在 `data()` 中使用组合式 API

<details>
Expand All @@ -402,7 +411,7 @@ export default {
// 在模版中会成为 { a: { value: 1 } }
a: ref(1)
}
},
}
}
```

Expand Down
Loading