From 649a2a52e59f2c0f2d52d39cf84fdbe3c35eb4da Mon Sep 17 00:00:00 2001 From: wanganxp Date: Wed, 22 May 2024 06:33:02 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84vue=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/vue/_sidebar.md | 2 +- docs/vue/component.md | 12 ++++++++++-- docs/vue/data-bind.md | 19 +++++++++++++++---- 3 files changed, 26 insertions(+), 7 deletions(-) diff --git a/docs/vue/_sidebar.md b/docs/vue/_sidebar.md index 814b85dd..b30283c0 100644 --- a/docs/vue/_sidebar.md +++ b/docs/vue/_sidebar.md @@ -5,6 +5,6 @@ - [全局 API](./global-api.md) - [组合式 API](./composition-api.md) - [选项式 API](./options-api.md) -- [内置内容](./built-in.md) +- [内置组件指令属性](./built-in.md) - [进阶 API](./advanced-api.md) - [vue 生态](./others.md) diff --git a/docs/vue/component.md b/docs/vue/component.md index b62a3e9f..be73bf76 100644 --- a/docs/vue/component.md +++ b/docs/vue/component.md @@ -25,10 +25,18 @@ uni-app x 组件基于 vue 单文件组件规范，一个组件内，有 3 个 ### 和页面的区别 @component-page-difference -组件的内容构成和页面大体上一致，但是在组件中，不支持 `onLoad`、`onShow` 等[页面生命周期](../page.md#lifecycle)，而是支持[组件生命周期](#component-lifecycle) +组件的内容构成和页面大体上一致，都符合vue的sfc规范。 -## 创建及引用组件 @create-and-import-component +事实上，一个在pages.json注册的页面uvue文件，也可以被当做一个组件引入到其他页面。 + +组件和页面的差别有： +1. 组件中不支持页面相关的生命周期和API，比如 `onLoad`、`onShow` 等[页面生命周期](../page.md#lifecycle)，比如$setPageStyle等API。 +2. 组件中有一批组件独有的生命周期和API，比如 `mounted`、`unmounted` 等[组件生命周期](#component-lifecycle)，比如页面和组件通信的API。 +3. 组件文件不需要在pages.json中注册 + +## 创建及引用组件 @create-and-import-component + ### 创建组件 @create-component #### easycom diff --git a/docs/vue/data-bind.md b/docs/vue/data-bind.md index 4f1df5b3..9af01799 100644 --- a/docs/vue/data-bind.md +++ b/docs/vue/data-bind.md @@ -20,7 +20,10 @@ vue的一大特色，就是可以定义一个响应式变量，通过模板绑 data需要特殊类型时，通过 as 来转换。 -如下示例中，在data的return中定义了响应式变量：str、num、arr。并在模板中通过`{{}}`的方式绑定和显示在text组件的内容区中。 +如下示例中， +- 首先在data的return中定义了响应式变量：str、num、arr，并赋值了初始值。 +- 第2步在模板template中通过`{{}}`的方式绑定和显示在text组件的内容区中。即右边预览区显示的3行内容，显示了3个响应式变量的初始值。 +- 第3步点击按钮“update data”，触发`updateData()`，在这个方法里通过`this.`来访问响应式变量，给它们重新赋值。然后界面上3行内容会被自动更新为新值。 示例 [详情]() @@ -34,15 +37,17 @@ data中的响应式变量，如需在script中使用，需通过 `this.xx` 的 组合式 API 没有 data 这种选项，而是通过 `ref`、`reactive` 方法来声明组件的响应式状态。 -这种定义方式更加灵活和简洁。但建议把 `ref` 定义都写在开头，否则到处都写也不好找。 +这种定义方式更加灵活和简洁。 + +建议把 `ref` 定义都写在开头，否则到处都写也不好找。 #### ref 使用 `ref()` 函数来定义一个响应式变量。 -需要给 `ref` 标注类型时，通过泛型的写法，如：`ref()`。 +需要给 `ref` 标注类型时，可通过泛型的写法，如：`ref()`， 或使用 `as` 的写法。 -当然 uts 有一定的自动推导能力，对于特别简单的布尔值/数字/字符串的字面量，不写泛型也可以自动推导类型。 +当然 uts 有一定的自动推导能力，对于特别简单的布尔值/数字/字符串的字面量，不写泛型或as，也可以自动推导类型。 ::: warning 注意 在使用复杂类型时，Android 端暂不支持通过泛型指定类型，可通过 as 方式指定类型。如： @@ -61,6 +66,12 @@ const counter = ref({ count: 0 } as Counter) // 而不是 ref({count: 0 - 在 uts 中取值时，需要使用 `.value`属性。 - 而在模板中使用 ref 时，不需要附加 `.value`（为了方便起见，在模板中使用时，ref 会自动解包，这样模板里的写法和选项式保持了一致）。 +如下示例中， +- 首先在明确script为setup，即组合式API。 +- 通过ref定义了3个响应式变量：count1、count2、counter（注意是小写），并赋值了初始值。 +- 在模板template中通过`{{}}`的方式绑定和显示在text组件的内容区中。即右边预览区显示的3行内容，显示了3个响应式变量的初始值。 +- 点击按钮“increment”，触发`increment()`，在这个方法里通过`.value`属性给响应式变量自增。然后界面上3行内容会被自动更新为新值。 + 示例 [详情]() ::: preview -- GitLab