diff --git a/docs/component/README.md b/docs/component/README.md
index 54b964afba37d116cff06d10e7a7a11bb4bbf634..7252d5deaa5a2d825244cb91b56720b3a8a39afe 100644
--- a/docs/component/README.md
+++ b/docs/component/README.md
@@ -245,26 +245,6 @@ uni-app x支持的组件包括：
 - 在 `uni-app x` 中，要访问 `$refs` 中的属性，需要使用索引方式。
 
 ::: preview
-> uni-app js 引擎版
-```ts
-<template>
-	<view>
-		<text ref="textRef">text node</text>
-		<Foo ref="fooRef" />
-	</view>
-</template>
-
-<script lang="ts">
-  import type { ComponentPublicInstance } from 'vue'
-
-	export default {
-		onReady() {
-			const text = this.$refs.textRef as Element // 仅H5端支持
-			const foo = this.$refs.fooRef as ComponentPublicInstance
-		}
-	}
-</script>
-```
 > uni-app x
 ```ts
 // 选项式 API
@@ -302,6 +282,26 @@ uni-app x支持的组件包括：
   const fooRef = ref<null | ComponentPublicInstance>(null)
 </script>
 ```
+> uni-app js 引擎版
+```ts
+<template>
+	<view>
+		<text ref="textRef">text node</text>
+		<Foo ref="fooRef" />
+	</view>
+</template>
+
+<script lang="ts">
+  import type { ComponentPublicInstance } from 'vue'
+
+	export default {
+		onReady() {
+			const text = this.$refs.textRef as Element // 仅H5端支持
+			const foo = this.$refs.fooRef as ComponentPublicInstance
+		}
+	}
+</script>
+```
 :::
 
 ## 监听页面生命周期