chore: prefer using ref in script setup (#9276)

src/field/demo/CustomType.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive } from 'vue';
+import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
 const i18n = {
@@ -30,43 +30,41 @@ const i18n = {
 };
 
 const t = useTranslate(i18n);
-const state = reactive({
-  text: '',
-  phone: '',
-  digit: '',
-  number: '',
-  password: '',
-});
+const text = ref('');
+const phone = ref('');
+const digit = ref('');
+const number = ref('');
+const password = ref('');
 </script>
 
 <template>
   <demo-block :title="t('customType')">
     <van-cell-group inset>
       <van-field
-        v-model="state.text"
+        v-model="text"
         :label="t('text')"
         :placeholder="t('textPlaceholder')"
       />
       <van-field
-        v-model="state.phone"
+        v-model="phone"
         type="tel"
         :label="t('phone')"
         :placeholder="t('phonePlaceholder')"
       />
       <van-field
-        v-model="state.digit"
+        v-model="digit"
         type="digit"
         :label="t('digit')"
         :placeholder="t('digitPlaceholder')"
       />
       <van-field
-        v-model="state.number"
+        v-model="number"
         type="number"
         :label="t('number')"
         :placeholder="t('numberPlaceholder')"
       />
       <van-field
-        v-model="state.password"
+        v-model="password"
         type="password"
         :label="t('password')"
         :placeholder="t('passwordPlaceholder')"

src/field/demo/ErrorInfo.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive } from 'vue';
+import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
 const i18n = {
@@ -18,24 +18,22 @@ const i18n = {
 };
 
 const t = useTranslate(i18n);
-const state = reactive({
-  phone: '123',
-  username: '',
-});
+const phone = ref('123');
+const username = ref('');
 </script>
 
 <template>
   <demo-block :title="t('errorInfo')">
     <van-cell-group inset>
       <van-field
-        v-model="state.username"
+        v-model="username"
         error
         required
         :label="t('username')"
         :placeholder="t('usernamePlaceholder')"
       />
       <van-field
-        v-model="state.phone"
+        v-model="phone"
         required
         :label="t('phone')"
         :placeholder="t('phonePlaceholder')"

src/field/demo/FormatValue.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive } from 'vue';
+import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
 const i18n = {
@@ -18,10 +18,8 @@ const i18n = {
 };
 
 const t = useTranslate(i18n);
-const state = reactive({
-  value1: '',
-  value2: '',
-});
+const value1 = ref('');
+const value2 = ref('');
 const formatter = (value: string) => value.replace(/\d/g, '');
 </script>
 
@@ -29,13 +27,13 @@ const formatter = (value: string) => value.replace(/\d/g, '');
   <demo-block :title="t('formatValue')">
     <van-cell-group inset>
       <van-field
-        v-model="state.value1"
+        v-model="value1"
         :label="t('text')"
         :formatter="formatter"
         :placeholder="t('formatOnChange')"
       />
       <van-field
-        v-model="state.value2"
+        v-model="value2"
         :label="t('text')"
         :formatter="formatter"
         format-trigger="onBlur"

src/field/demo/ShowIcon.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive } from 'vue';
+import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
 const i18n = {
@@ -16,24 +16,22 @@ const i18n = {
 };
 
 const t = useTranslate(i18n);
-const state = reactive({
-  icon1: '',
-  icon2: '123',
-});
+const icon1 = ref('');
+const icon2 = ref('123');
 </script>
 
 <template>
   <demo-block :title="t('showIcon')">
     <van-cell-group inset>
       <van-field
-        v-model="state.icon1"
+        v-model="icon1"
         :label="t('text')"
         left-icon="smile-o"
         right-icon="warning-o"
         :placeholder="t('showIcon')"
       />
       <van-field
-        v-model="state.icon2"
+        v-model="icon2"
         clearable
         :label="t('text')"
         left-icon="music-o"