diff --git a/README.zh-CN.md b/README.zh-CN.md index 490534a2..a001251a 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -1,13 +1,12 @@ # @vue/composition-api -Vue 2 插件用于提供 Vue 3 中的 **组合式 API**. +用于提供 **组合式 API** 的 Vue 2 插件. [![npm](https://img.shields.io/npm/v/@vue/composition-api)](https://www.npmjs.com/package/@vue/composition-api) [![GitHub Workflow Status](https://img.shields.io/github/workflow/status/vuejs/composition-api/Build%20&%20Test)](https://github.com/vuejs/composition-api/actions?query=workflow%3A%22Build+%26+Test%22) [English](./README.md) | 中文 ・ [**组合式 API 文档**](https://composition-api.vuejs.org/zh) - ## 安装 ### NPM @@ -18,7 +17,7 @@ npm install @vue/composition-api yarn add @vue/composition-api ``` -在使用 `@vue/composition-api` 前,必须先先通过 `Vue.use()` 进行安装后方可使用使用新的 [**组合式 API**](https://composition-api.vuejs.org/zh) 进行组件开发。 +在使用 `@vue/composition-api` 前,必须先通过 `Vue.use()` 进行安装。之后才可使用新的 [**组合式 API**](https://composition-api.vuejs.org/zh) 进行组件开发。 ```js import Vue from 'vue' @@ -34,16 +33,17 @@ import { ref, reactive } from '@vue/composition-api' > :bulb: 当迁移到 Vue 3 时,只需简单的将 `@vue/composition-api` 替换成 `vue` 即可。你现有的代码几乎无需进行额外的改动。 - ### CDN 在 Vue 之后引入 `@vue/composition-api` ,插件将会自动完成安装。 + ```html ``` + `@vue/composition-api` 将会暴露在全局变量 `window.VueCompositionAPI` 中。 @@ -56,7 +56,7 @@ const { ref, reactive } = VueCompositionAPI > 本插件要求使用 TypeScript **3.5.1** 或以上版本 -为了让 TypeScript 在 Vue 组件选项中正确地推导类型,我们必须使用 `defineComponent` 来定义组件: +为了让 TypeScript 在 Vue 组件选项中正确地进行类型推导,我们必须使用 `defineComponent` 来定义组件: ```ts import { defineComponent } from '@vue/composition-api' @@ -72,7 +72,7 @@ export default defineComponent({ ## SSR -尽管 Vue 3 暂时没有给出确定的 SSR 的 API,这个插件实现了 `onServerPrefetch` 生命周期钩子函数。这个钩子允许你使用在传统 API 中的 `serverPrefetch` 函数。 +尽管 Vue 3 暂时没有给出确定的 SSR 的 API,这个插件实现了 `onServerPrefetch` 生命周期钩子函数。这个钩子允许你使用传统 API 中的 `serverPrefetch` 函数。 ```js import { onServerPrefetch } from '@vue/composition-api' @@ -86,9 +86,9 @@ export default { }) return { - result + result, } - } + }, } ``` @@ -96,12 +96,10 @@ export default { > :white_check_mark: 支持     :x: 不支持 - ### `Ref` 自动展开 (unwrap) 数组索引属性无法进行自动展开: -
不要 使用数组直接存取 ref 对象 @@ -121,19 +119,17 @@ state.list[1].value === 1 // true
-
不要 在数组中使用含有 ref 的普通对象 - ```js const a = { - count: ref(0) + count: ref(0), } const b = reactive({ - list: [a] // `a.count` 不会自动展开!! + list: [a], // `a.count` 不会自动展开!! }) // `count` 不会自动展开, 须使用 `.value` @@ -144,9 +140,9 @@ b.list[0].count.value === 0 // true const b = reactive({ list: [ { - count: ref(0) // 不会自动展开!! - } - ] + count: ref(0), // 不会自动展开!! + }, + ], }) // `count` 不会自动展开, 须使用 `.value` @@ -155,7 +151,6 @@ b.list[0].count.value === 0 // true
-
✅ 在数组中,应该 总是将 ref 存放到 reactive 对象中 @@ -163,21 +158,21 @@ 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), }) ) // 自动展开 -b.list[1].count === 1; // true +b.list[1].count === 1 // true ```
@@ -205,17 +200,15 @@ b.list[1].count === 1; // true }) return { - root + root, } - } + }, } ``` - -
✅ 字符串 ref && 从 setup() 返回 ref && 渲染函数 / JSX @@ -232,25 +225,23 @@ export default { }) return { - root + root, } }, render() { // 使用 JSX return () =>
- } + }, } ```
-
❌ 函数 ref - ```html