更新x

docs/uni-app-x/dom.md

 # UVUE DOM  
-UVEU页面在渲染过程中会生成对应的文档对象模型（DOM），DOM 是页面文档结构和内容的对象的数据表示。DOM 模型用一个逻辑树来表示一个页面文档，树的每个分支的终点都是一个节点，每个节点都对应一个节点对象（INode）。  
-你可以调用 DOM API 操作页面的这个逻辑树，从而改变页面的结构、样式或者内容。  
-
-通常情况下，我们建议使用 vue 框架的数据绑定来操作更新页面组件。但在一些特定场景，如响应触屏事件更新组件的位置实现跟手拖拽效果，可以通过 DOM API 跳过 vue 框架直接操作组件的样式，从而达到更高的效率。
-
-**注意**  
-在 App 端UVUE页面的 DOM 和 [W3C的DOM规范](https://www.w3.org/DOM/?spm=a2c7j.-zh-docs-api-weex-variable.0.0.2a5537c6FrgbYp)有一些差别，暂不支持直接使用 document 对象创建和操作 DOM 树中的元素。请参考[获取DOM元素对象](#getDomNode)中的示例。
-
+
+App-uvue的每个页面，在内存中都有一个 DOM（文档对象模型）。它和浏览器的 [DOM规范](https://www.w3.org/DOM/?spm=a2c7j.-zh-docs-api-weex-variable.0.0.2a5537c6FrgbYp) 类似。
+
+DOM 是页面元素内容的结构数据。DOM 模型用一个逻辑树来表示一个页面文档，树的每个分支的终点都是一个节点，每个节点都对应一个节点对象（INode）。
+
+实际上 app-uvue 的template、数据绑定，在底层调用的也是 DOM API。
+
+在浏览器中，开发者一旦跳过vue框架直接操作dom，vue框架将无法管理相应dom，开发者需要注意两端的冲突。
+
+在 App 端，为了减少冲突，目前不支持通过 DOM API 创建和删除 DOM 树中的元素。只支持获取元素INode。
+
+## 使用场景
+通常情况下，使用 uvue 框架的数据绑定来操作更新页面组件就可以。但有2个场景，需要使用 DOM API。
+
+1. 跟手动效
+
+	响应触屏事件更新组件的位置，要想不掉帧，需要保证16毫秒绘制一帧。
+	
+	uvue的data更新，有一套diff机制，每次触发data更新，会多几毫秒的耗时。
+	
+	此时推荐通过 DOM API 跳过 vue 框架直接操作组件的样式。
+
+2. Draw API
+
+	Android和iOS的原生view，有一些底层的高性能绘制能力，这些API的调用，需要先获取到INode对象，然后再调用其方法。
 
 ## 获取DOM元素对象@getDomNode  
-在UVUE页面中可以通过 vue 框架中的组件实例对象 [$refs](https://uniapp.dcloud.net.cn/tutorial/vue3-api.html#%E5%AE%9E%E4%BE%8B-property) 获取 DOM 元素对象。  
+
+app-uvue页面中可以通过 vue 框架中的组件实例对象 [$refs](https://uniapp.dcloud.net.cn/tutorial/vue3-api.html#%E5%AE%9E%E4%BE%8B-property) 获取 DOM 元素对象。  
 
-首先需要为组件设置 ref 属性值：
+首先需要为组件设置 ref 属性值，它类似于id：
 ```vue
 <!-- ref 属性值为 myNode，后续可以通过此值查找 -->
 <view ref="myNode" class="container">
 </view>
 ```
-在页面生命周期 `onReady` 中通过 $refs 获取，如果长期使用，建议保存在vue的 data 中：
+
+在页面生命周期 `onReady` 中（太早组件可能没有创建），通过 `$refs` 获取。如果长期使用，可以保存在vue的 data 中。
 ```ts
 export default {
 	data() {
@@ -31,6 +50,7 @@ export default {
 	},
 }
 ```
+
 通过INode对象的 style 属性更新组件的样式：
 ```ts
 this.myNode?.style?.setProperty('background-color', 'red');
@@ -85,7 +105,8 @@ this.myNode?.style?.setProperty('background-color', 'red');
 }
 </style>
 ```
-
+
+以上例子仅为演示DOM API的使用，实际上点击按钮修改背景色这种简单场景，使用数据绑定更简单，class绑定到一个data上，动态修改data即可。
 
 ## DOM接口  
 - [INode](dom/inode.md)  

docs/uni-app-x/performance.md

@@ -56,6 +56,12 @@ uni-app x 中，没有通信阻塞，可以直接监听touch和滚动事件。
 
 源码参考hello uni-app x中的吸顶示例，这充分体现了 uni-app x 引擎底层的通信性能多么优秀。[详见](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/template/scroll-sticky/scroll-sticky.uvue)
 
+还有一个注意事项，当通过动画修改一个元素的高度或top值时，注意元素下部其他元素的联动反应。
+
+比如上元素通过transform变高，虽然上元素的变化是平滑的，但下面的元素数量如果很多，且因为自动排版的原因，在不停的根据上元素变化而移动每个下面元素的top，这也会导致ui卡顿。
+
+这个例子在折叠面板里存在，展开上面的折叠面板A时，推荐的做法是A的高度不做动画，直接变高，然后A的子元素以动画方式出现。看起来也有动效，且A下面的B、C、D等折叠面板元素只发生一次位移排版。
+
 ## 避免复杂逻辑卡UI
 
 开发者的代码默认是在ui主线程运行的。除非单独写代码调用子进程或协程。

docs/uni-app-x/readme.md

@@ -103,6 +103,7 @@ uni-app x 一期，只包括基本的组件和API。
 - [x] swiper
 - [x] text
 - [x] image
+- [x] rich-text
 - [x] button
 - [x] input
 - [x] textarea
@@ -123,14 +124,12 @@ uni-app x 一期，只包括基本的组件和API。
 - waterfall/grid-view：会补充
 - uniCloud-db：会补充
 - ad：会补充
-- rich-text：可改用web-view渲染；也可以拼接多个text、image组件；如果仅是文字样式变化，text组件也支持简单的嵌套
 - editor：只能用web-view来加载
 - map：需开发uts组件。或使用web-view中的地图
 - live-pusher：需开发uts组件
 - form
 - label
 
-
 ## 4. uni的API
 
 uni-app js引擎版，支持 plus API 和 weex API。但 uni-app x 中，不再支持这些API。

docs/uts/data-type.md

@@ -419,8 +419,37 @@ console.log(baz);
 ```ts
 const l = b!.length
 ```
+<!-- 
+#### vue data中null的用法
 
+很多时候，data的数据需要通过script获取，而 uts 不支持 undefined，初始化时就只能赋null。
 
+```html
+<script lang=uts>
+	type PersonType = {
+		id: number,
+	    name: string,
+		age: number
+	}
+	export default {
+		data() {
+			return {
+				person: null as PersonType | null,
+			}
+		},
+		onLoad() {
+			this.person = JSON.parse(`{
+				id: 1, 
+				name: "zhangsan", 
+				age: 18,
+				address: {city: "beijing",street: "dazhongsi road"}
+			}`) as PersonType
+			console.log(this.person?.address?.city);
+		}
+	}
+</script>
+```
+ -->
 ### 日期（Date）@date
 
 日期对象表示日期，包括年月日时分秒等各种日期。
@@ -439,7 +468,7 @@ const year:number = myDate.getFullYear()
 Date对象还有很多方法属性，[详见](buildin-object-api/date.md)
 
 
-### 数组（Array）
+### 数组（Array）@array
 
 Array，即数组，支持在单个变量名下存储多个元素，并具有执行常见数组操作的成员。
 
@@ -469,10 +498,13 @@ let a2 = [1,'2',3];//支持
 let a3 = [1,,2,3];//不支持
 ```
 
+如果想定义一个空数组，则不能依赖编译器的自动推导，需显式声明空数组的类型。见下
+
 2. 使用:Array<>定义数组项的类型
 
 ```ts
 const a1:Array<string> = ["uni-app", "uniCloud", "HBuilder"] //表示数组内容都是string。如不能确定可以写Array<any>
+let a2:Array<number> = []; //定义一个数字类型的空数组
 ```
 
 3. 使用[]定义数组项的类型
@@ -488,6 +520,17 @@ let a3 = Array(1,2,3);//支持
 let a4 = Array(1,'2','3');//安卓平台支持, iOS 平台不支持，在 iOS 中创建 Any[] 数组请直接使用数组字面量，如 let a4 = [1,'2','3']
 ```
 
+5. uvue的data定义数组
+```ts
+export default {
+	data() {
+		return {
+			listdata: [] as Array<UTSJSONObject>,
+		}
+	}
+}
+```
+
 字面量创建的数组，在uts的老版本上，kotlin自动推导数组类型时，可能会推导成intArray，而不是uts的array。建议显式声明类型。
 
 typeof 一个 array 得到的是 object。需使用 Array.isArray 或 instanceof 来判断数组类型。