完善vue文档

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)

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
+<!-- TODO：此处需要重写 -->
 ### 创建组件 @create-component
 
 #### easycom

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行内容会被自动更新为新值。
 
 示例 [详情](<!-- VUEJSON.E_component-instance.data_data-options.gitUrl -->)
 
@@ -34,15 +37,17 @@ data中的响应式变量，如需在script中使用，需通过 `this.xx` 的
 
 组合式 API 没有 data 这种选项，而是通过 `ref`、`reactive` 方法来声明组件的响应式状态。
 
-这种定义方式更加灵活和简洁。但建议把 `ref` 定义都写在开头，否则到处都写也不好找。
+这种定义方式更加灵活和简洁。
+
+建议把 `ref` 定义都写在开头，否则到处都写也不好找。
 
 #### ref
 
 使用 `ref()` 函数来定义一个响应式变量。
 
-需要给 `ref` 标注类型时，通过泛型的写法，如：`ref<string>()`。
+需要给 `ref` 标注类型时，可通过泛型的写法，如：`ref<string>()`， 或使用 `as` 的写法。
 
-当然 uts 有一定的自动推导能力，对于特别简单的布尔值/数字/字符串的字面量，不写泛型也可以自动推导类型。
+当然 uts 有一定的自动推导能力，对于特别简单的布尔值/数字/字符串的字面量，不写泛型或as，也可以自动推导类型。
 
 ::: warning 注意
 在使用复杂类型时，Android 端暂不支持通过泛型指定类型，可通过 as 方式指定类型。如：
@@ -61,6 +66,12 @@ const counter = ref({ count: 0 } as Counter) // 而不是 ref<Counter>({count: 0
 - 在 uts 中取值时，需要使用 `.value`属性。
 - 而在模板中使用 ref 时，不需要附加 `.value`（为了方便起见，在模板中使用时，ref 会自动解包，这样模板里的写法和选项式保持了一致）。
 
+如下示例中，
+- 首先在明确script为setup，即组合式API。
+- 通过ref定义了3个响应式变量：count1、count2、counter（注意是小写），并赋值了初始值。
+- 在模板template中通过`{{}}`的方式绑定和显示在text组件的内容区中。即右边预览区显示的3行内容，显示了3个响应式变量的初始值。
+- 点击按钮“increment”，触发`increment()`，在这个方法里通过`.value`属性给响应式变量自增。然后界面上3行内容会被自动更新为新值。
+
 示例 [详情](<!-- VUEJSON.E_reactivity.core_ref_ref.gitUrl -->)
 
 ::: preview <!-- VUEJSON.E_reactivity.core_ref_ref.webUrl -->