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

src/action-sheet/demo/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, reactive } from 'vue';
+import { ref, computed } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { ActionSheetAction } from '..';
 import { Toast } from '../../toast';
@@ -36,13 +36,11 @@ const i18n = {
 };
 
 const t = useTranslate(i18n);
-const show = reactive({
+const showBasic = ref(false);
-  basic: false,
+const showCancel = ref(false);
-  cancel: false,
+const showTitle = ref(false);
-  title: false,
+const showStatus = ref(false);
-  status: false,
+const showDescription = ref(false);
-  description: false,
-});
 
 const simpleActions = computed<ActionSheetAction[]>(() => [
   { name: t('option1') },
@@ -63,7 +61,7 @@ const actionsWithDescription = computed<ActionSheetAction[]>(() => [
 ]);
 
 const onSelect = (item: ActionSheetAction) => {
-  show.basic = false;
+  showBasic.value = false;
   Toast(item.name);
 };
 
@@ -72,31 +70,31 @@ const onCancel = () => Toast(t('cancel'));
 
 <template>
   <demo-block card :title="t('basicUsage')">
-    <van-cell is-link :title="t('basicUsage')" @click="show.basic = true" />
+    <van-cell is-link :title="t('basicUsage')" @click="showBasic = true" />
-    <van-cell is-link :title="t('showCancel')" @click="show.cancel = true" />
+    <van-cell is-link :title="t('showCancel')" @click="showCancel = true" />
     <van-cell
       is-link
       :title="t('showDescription')"
-      @click="show.description = true"
+      @click="showDescription = true"
     />
   </demo-block>
 
   <demo-block card :title="t('optionStatus')">
-    <van-cell is-link :title="t('optionStatus')" @click="show.status = true" />
+    <van-cell is-link :title="t('optionStatus')" @click="showStatus = true" />
   </demo-block>
 
   <demo-block card :title="t('customPanel')">
-    <van-cell is-link :title="t('customPanel')" @click="show.title = true" />
+    <van-cell is-link :title="t('customPanel')" @click="showTitle = true" />
   </demo-block>
 
   <van-action-sheet
-    v-model:show="show.basic"
+    v-model:show="showBasic"
     :actions="simpleActions"
     @select="onSelect"
   />
 
   <van-action-sheet
-    v-model:show="show.cancel"
+    v-model:show="showCancel"
     :actions="simpleActions"
     close-on-click-action
     :cancel-text="t('cancel')"
@@ -104,7 +102,7 @@ const onCancel = () => Toast(t('cancel'));
   />
 
   <van-action-sheet
-    v-model:show="show.description"
+    v-model:show="showDescription"
     :actions="actionsWithDescription"
     close-on-click-action
     :cancel-text="t('cancel')"
@@ -112,13 +110,13 @@ const onCancel = () => Toast(t('cancel'));
   />
 
   <van-action-sheet
-    v-model:show="show.status"
+    v-model:show="showStatus"
     close-on-click-action
     :actions="statusActions"
     :cancel-text="t('cancel')"
   />
 
-  <van-action-sheet v-model:show="show.title" :title="t('title')">
+  <van-action-sheet v-model:show="showTitle" :title="t('title')">
     <div class="demo-action-sheet-content">{{ t('content') }}</div>
   </van-action-sheet>
 </template>

src/circle/demo/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive } from 'vue';
+import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
 const format = (rate: number) => Math.min(Math.max(rate, 0), 100);
@@ -24,13 +24,11 @@ const i18n = {
 };
 
 const t = useTranslate(i18n);
-const state = reactive({
+const rate = ref(70);
-  rate: 70,
+const currentRate1 = ref(70);
-  currentRate1: 70,
+const currentRate2 = ref(70);
-  currentRate2: 70,
+const currentRate3 = ref(70);
-  currentRate3: 70,
+const currentRate4 = ref(70);
-  currentRate4: 70,
-});
 
 const gradientColor = {
   '0%': '#3fecff',
@@ -38,54 +36,54 @@ const gradientColor = {
 };
 
 const add = () => {
-  state.rate = format(state.rate + 20);
+  rate.value = format(rate.value + 20);
 };
 
 const reduce = () => {
-  state.rate = format(state.rate - 20);
+  rate.value = format(rate.value - 20);
 };
 </script>
 
 <template>
   <demo-block :title="t('basicUsage')">
     <van-circle
-      v-model:current-rate="state.currentRate1"
+      v-model:current-rate="currentRate1"
-      :rate="state.rate"
+      :rate="rate"
       :speed="100"
-      :text="state.currentRate1.toFixed(0) + '%'"
+      :text="currentRate1.toFixed(0) + '%'"
     />
   </demo-block>
 
   <demo-block :title="t('customStyle')">
     <van-circle
-      v-model:current-rate="state.currentRate3"
+      v-model:current-rate="currentRate3"
-      :rate="state.rate"
+      :rate="rate"
       :speed="100"
       :stroke-width="60"
       :text="t('customWidth')"
     />
 
     <van-circle
-      v-model:current-rate="state.currentRate3"
+      v-model:current-rate="currentRate3"
       color="#ee0a24"
-      :rate="state.rate"
+      :rate="rate"
       layer-color="#ebedf0"
       :speed="100"
       :text="t('customColor')"
     />
 
     <van-circle
-      v-model:current-rate="state.currentRate2"
+      v-model:current-rate="currentRate2"
-      :rate="state.rate"
+      :rate="rate"
       :speed="100"
       :color="gradientColor"
       :text="t('gradient')"
     />
 
     <van-circle
-      v-model:current-rate="state.currentRate4"
+      v-model:current-rate="currentRate4"
       color="#07c160"
-      :rate="state.rate"
+      :rate="rate"
       :speed="100"
       :clockwise="false"
       :text="t('counterClockwise')"
@@ -93,9 +91,9 @@ const reduce = () => {
     />
 
     <van-circle
-      v-model:current-rate="state.currentRate4"
+      v-model:current-rate="currentRate4"
       color="#7232dd"
-      :rate="state.rate"
+      :rate="rate"
       :speed="100"
       size="120px"
       :clockwise="false"

src/collapse/demo/index.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,17 +16,15 @@ const i18n = {
 };
 
 const t = useTranslate(i18n);
-const state = reactive({
+const active1 = ref([0]);
-  active1: [0],
+const active2 = ref(0);
-  active2: 0,
+const active3 = ref([]);
-  active3: [],
+const active4 = ref([]);
-  active4: [],
-});
 </script>
 
 <template>
   <demo-block :title="t('basicUsage')">
-    <van-collapse v-model="state.active1">
+    <van-collapse v-model="active1">
       <van-collapse-item :title="t('title') + 1">
         {{ t('text') }}
       </van-collapse-item>
@@ -40,7 +38,7 @@ const state = reactive({
   </demo-block>
 
   <demo-block :title="t('accordion')">
-    <van-collapse v-model="state.active2" accordion>
+    <van-collapse v-model="active2" accordion>
       <van-collapse-item :title="t('title') + 1">
         {{ t('text') }}
       </van-collapse-item>
@@ -54,7 +52,7 @@ const state = reactive({
   </demo-block>
 
   <demo-block :title="t('disabled')">
-    <van-collapse v-model="state.active3">
+    <van-collapse v-model="active3">
       <van-collapse-item :title="t('title') + 1">
         {{ t('text') }}
       </van-collapse-item>
@@ -68,7 +66,7 @@ const state = reactive({
   </demo-block>
 
   <demo-block :title="t('titleSlot')">
-    <van-collapse v-model="state.active4">
+    <van-collapse v-model="active4">
       <van-collapse-item>
         <template #title>
           {{ t('title') + 1 }}<van-icon name="question-o" />

src/config-provider/demo/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import { reactive } from '@vue/reactivity';
 
 const i18n = {
   'zh-CN': {
@@ -22,12 +22,8 @@ const i18n = {
 };
 
 const t = useTranslate(i18n);
-const state = reactive({
+const rate = ref(4);
-  rate: 4,
+const slider = ref(50);
-  slider: 50,
-  switchChecked: true,
-});
-
 const themeVars = {
   rateIconFullColor: '#07c160',
   sliderBarHeight: '4px',
@@ -44,13 +40,13 @@ const themeVars = {
     <van-form>
       <van-field name="rate" :label="t('rate')">
         <template #input>
-          <van-rate v-model="state.rate" />
+          <van-rate v-model="rate" />
         </template>
       </van-field>
 
       <van-field name="slider" :label="t('slider')">
         <template #input>
-          <van-slider v-model="state.slider" />
+          <van-slider v-model="slider" />
         </template>
       </van-field>
 
@@ -67,13 +63,13 @@ const themeVars = {
       <van-form>
         <van-field name="rate" :label="t('rate')">
           <template #input>
-            <van-rate v-model="state.rate" />
+            <van-rate v-model="rate" />
           </template>
         </van-field>
 
         <van-field name="slider" :label="t('slider')">
           <template #input>
-            <van-slider v-model="state.slider" />
+            <van-slider v-model="slider" />
           </template>
         </van-field>
 

src/coupon-list/demo/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, reactive } from 'vue';
+import { ref, computed } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { CouponInfo } from '../../coupon';
 import { Toast } from '../../toast';
@@ -27,11 +27,9 @@ const getRandomId = (max = 999999) =>
   String(Math.floor(Math.random() * max) + 1);
 
 const t = useTranslate(i18n);
-const state = reactive({
+const showList = ref(false);
-  showList: false,
+const chosenCoupon = ref(-1);
-  chosenCoupon: -1,
+const exchangedCoupons = ref<CouponInfo[]>([]);
-  exchangedCoupons: [] as CouponInfo[],
-});
 
 const coupon = computed(() => ({
   id: 1,
@@ -71,7 +69,7 @@ const disabledDiscountCoupon = computed(() => ({
 const coupons = computed(() => [
   coupon.value,
   discountCoupon.value,
-  ...state.exchangedCoupons,
+  ...exchangedCoupons.value,
 ]);
 
 const disabledCoupons = computed(() => [
@@ -80,13 +78,13 @@ const disabledCoupons = computed(() => [
 ]);
 
 const onChange = (index: number) => {
-  state.showList = false;
+  showList.value = false;
-  state.chosenCoupon = index;
+  chosenCoupon.value = index;
 };
 
 const onExchange = () => {
   Toast(t('exchange'));
-  state.exchangedCoupons.push({
+  exchangedCoupons.value.push({
     ...coupon.value,
     id: getRandomId(),
   });
@@ -97,18 +95,18 @@ const onExchange = () => {
   <demo-block :title="t('basicUsage')">
     <van-coupon-cell
       :coupons="coupons"
-      :chosen-coupon="state.chosenCoupon"
+      :chosen-coupon="chosenCoupon"
-      @click="state.showList = true"
+      @click="showList = true"
     />
     <van-popup
-      v-model:show="state.showList"
+      v-model:show="showList"
       round
       position="bottom"
       style="height: 90%; padding-top: 4px"
     >
       <van-coupon-list
         :coupons="coupons"
-        :chosen-coupon="state.chosenCoupon"
+        :chosen-coupon="chosenCoupon"
         :disabled-coupons="disabledCoupons"
         :show-count="false"
         @change="onChange"

src/dropdown-menu/demo/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, reactive, ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import type { DropdownItemInstance } from '../../dropdown-item';
 
@@ -47,12 +47,10 @@ const i18n = {
 const item = ref<DropdownItemInstance>();
 const t = useTranslate(i18n);
 
-const state = reactive({
+const switch1 = ref(true);
-  switch1: true,
+const switch2 = ref(false);
-  switch2: false,
+const value1 = ref(0);
-  value1: 0,
+const value2 = ref('a');
-  value2: 'a',
-});
 
 const option1 = computed(() => t('option1'));
 const option2 = computed(() => t('option2'));
@@ -65,31 +63,23 @@ const onConfirm = () => {
 <template>
   <demo-block :title="t('basicUsage')">
     <van-dropdown-menu>
-      <van-dropdown-item v-model="state.value1" :options="option1" />
+      <van-dropdown-item v-model="value1" :options="option1" />
-      <van-dropdown-item v-model="state.value2" :options="option2" />
+      <van-dropdown-item v-model="value2" :options="option2" />
     </van-dropdown-menu>
   </demo-block>
 
   <demo-block :title="t('customContent')">
     <van-dropdown-menu>
-      <van-dropdown-item v-model="state.value1" :options="option1" />
+      <van-dropdown-item v-model="value1" :options="option1" />
       <van-dropdown-item :title="t('itemTitle')" ref="item">
         <van-cell center :title="t('switchTitle1')">
           <template #right-icon>
-            <van-switch
+            <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
-              v-model="state.switch1"
-              size="24"
-              active-color="#ee0a24"
-            />
           </template>
         </van-cell>
         <van-cell center :title="t('switchTitle2')">
           <template #right-icon>
-            <van-switch
+            <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
-              v-model="state.switch2"
-              size="24"
-              active-color="#ee0a24"
-            />
           </template>
         </van-cell>
         <div style="padding: 5px 16px">
@@ -109,22 +99,22 @@ const onConfirm = () => {
 
   <demo-block :title="t('customActiveColor')">
     <van-dropdown-menu active-color="#1989fa">
-      <van-dropdown-item v-model="state.value1" :options="option1" />
+      <van-dropdown-item v-model="value1" :options="option1" />
-      <van-dropdown-item v-model="state.value2" :options="option2" />
+      <van-dropdown-item v-model="value2" :options="option2" />
     </van-dropdown-menu>
   </demo-block>
 
   <demo-block :title="t('expandDirection')">
     <van-dropdown-menu direction="up">
-      <van-dropdown-item v-model="state.value1" :options="option1" />
+      <van-dropdown-item v-model="value1" :options="option1" />
-      <van-dropdown-item v-model="state.value2" :options="option2" />
+      <van-dropdown-item v-model="value2" :options="option2" />
     </van-dropdown-menu>
   </demo-block>
 
   <demo-block :title="t('disableMenu')">
     <van-dropdown-menu>
-      <van-dropdown-item v-model="state.value1" disabled :options="option1" />
+      <van-dropdown-item v-model="value1" disabled :options="option1" />
-      <van-dropdown-item v-model="state.value2" disabled :options="option2" />
+      <van-dropdown-item v-model="value2" disabled :options="option2" />
     </van-dropdown-menu>
   </demo-block>
 </template>

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({
+const text = ref('');
-  text: '',
+const phone = ref('');
-  phone: '',
+const digit = ref('');
-  digit: '',
+const number = ref('');
-  number: '',
+const password = ref('');
-  password: '',
-});
 </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({
+const phone = ref('123');
-  phone: '123',
+const username = ref('');
-  username: '',
-});
 </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({
+const value1 = ref('');
-  value1: '',
+const value2 = ref('');
-  value2: '',
-});
 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({
+const icon1 = ref('');
-  icon1: '',
+const icon2 = ref('123');
-  icon2: '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"

src/form/demo/BasicUsage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive } from 'vue';
+import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { FieldValidateError } from '../../field/types';
 
@@ -21,10 +21,8 @@ const i18n = {
 };
 
 const t = useTranslate(i18n);
-const state = reactive({
+const username = ref('');
-  username: '',
+const password = ref('');
-  password: '',
-});
 
 const onSubmit = (values: Record<string, string>) => {
   console.log('submit', values);
@@ -43,14 +41,14 @@ const onFailed = (errorInfo: {
     <van-form @submit="onSubmit" @failed="onFailed">
       <van-cell-group inset>
         <van-field
-          v-model="state.username"
+          v-model="username"
           name="username"
           :label="t('username')"
           :rules="[{ required: true, message: t('requireUsername') }]"
           :placeholder="t('username')"
         />
         <van-field
-          v-model="state.password"
+          v-model="password"
           type="password"
           name="password"
           :label="t('password')"

src/form/demo/FieldType.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive } from 'vue';
+import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import FieldTypeArea from './FieldTypeArea.vue';
 import FieldTypePicker from './FieldTypePicker.vue';
@@ -38,16 +38,14 @@ const i18n = {
 };
 
 const t = useTranslate(i18n);
-const state = reactive({
+const rate = ref(3);
-  rate: 3,
+const radio = ref('1');
-  radio: '1',
+const slider = ref(50);
-  slider: 50,
+const stepper = ref(1);
-  stepper: 1,
+const uploader = ref([{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }]);
-  uploader: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }],
+const checkbox = ref(false);
-  checkbox: false,
+const checkboxGroup = ref([]);
-  checkboxGroup: [],
+const switchChecked = ref(false);
-  switchChecked: false,
-});
 
 const onSubmit = (values: Record<string, string>) => {
   console.log(values);
@@ -60,22 +58,19 @@ const onSubmit = (values: Record<string, string>) => {
       <van-cell-group inset>
         <van-field name="switch" :label="t('switch')">
           <template #input>
-            <van-switch v-model="state.switchChecked" size="20" />
+            <van-switch v-model="switchChecked" size="20" />
           </template>
         </van-field>
 
         <van-field name="checkbox" :label="t('checkbox')">
           <template #input>
-            <van-checkbox v-model="state.checkbox" shape="square" />
+            <van-checkbox v-model="checkbox" shape="square" />
           </template>
         </van-field>
 
         <van-field name="checkboxGroup" :label="t('checkboxGroup')">
           <template #input>
-            <van-checkbox-group
+            <van-checkbox-group v-model="checkboxGroup" direction="horizontal">
-              v-model="state.checkboxGroup"
-              direction="horizontal"
-            >
               <van-checkbox name="1" shape="square">
                 {{ t('checkbox') }} 1
               </van-checkbox>
@@ -88,7 +83,7 @@ const onSubmit = (values: Record<string, string>) => {
 
         <van-field name="radio" :label="t('radio')">
           <template #input>
-            <van-radio-group v-model="state.radio" direction="horizontal">
+            <van-radio-group v-model="radio" direction="horizontal">
               <van-radio name="1">{{ t('radio') }} 1</van-radio>
               <van-radio name="2">{{ t('radio') }} 2</van-radio>
             </van-radio-group>
@@ -97,25 +92,25 @@ const onSubmit = (values: Record<string, string>) => {
 
         <van-field name="stepper" :label="t('stepper')">
           <template #input>
-            <van-stepper v-model="state.stepper" />
+            <van-stepper v-model="stepper" />
           </template>
         </van-field>
 
         <van-field name="rate" :label="t('rate')">
           <template #input>
-            <van-rate v-model="state.rate" />
+            <van-rate v-model="rate" />
           </template>
         </van-field>
 
         <van-field name="slider" :label="t('slider')">
           <template #input>
-            <van-slider v-model="state.slider" />
+            <van-slider v-model="slider" />
           </template>
         </van-field>
 
         <van-field name="uploader" :label="t('uploader')">
           <template #input>
-            <van-uploader v-model="state.uploader" max-count="2" />
+            <van-uploader v-model="uploader" max-count="2" />
           </template>
         </van-field>
 

src/form/demo/FieldTypeArea.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive } from 'vue';
+import { ref } from 'vue';
 import { areaList } from '@vant/area-data';
 import { useTranslate } from '@demo/use-translate';
 import { AreaColumnOption } from '../../area';
@@ -19,40 +19,33 @@ const i18n = {
 };
 
 const t = useTranslate(i18n);
-const state = reactive({
+const areaCode = ref('');
-  value: '',
+const showArea = ref(false);
-  showArea: false,
-});
 
 const onConfirm = (values: AreaColumnOption[]) => {
-  state.value = values
+  areaCode.value = values
     .filter((item) => !!item)
     .map((item) => item.name)
     .join('/');
-  state.showArea = false;
+  showArea.value = false;
 };
 
 const onCancel = () => {
-  state.showArea = false;
+  showArea.value = false;
 };
 </script>
 
 <template>
   <van-field
-    v-model="state.value"
+    v-model="areaCode"
     is-link
     readonly
     name="area"
     :label="t('picker')"
     :placeholder="t('placeholder')"
-    @click="state.showArea = true"
+    @click="showArea = true"
   />
-  <van-popup
+  <van-popup v-model:show="showArea" round position="bottom" teleport="body">
-    v-model:show="state.showArea"
-    round
-    position="bottom"
-    teleport="body"
-  >
     <van-area
       :area-list="t('areaList')"
       @confirm="onConfirm"

src/form/demo/FieldTypeCalendar.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 = {
@@ -14,31 +14,29 @@ const i18n = {
 };
 
 const t = useTranslate(i18n);
-const state = reactive({
+const result = ref('');
-  value: '',
+const showCalendar = ref(false);
-  showCalendar: false,
-});
 
 const formatDate = (date: Date) => `${date.getMonth() + 1}/${date.getDate()}`;
 
 const onConfirm = (date: Date) => {
-  state.value = formatDate(date);
+  result.value = formatDate(date);
-  state.showCalendar = false;
+  showCalendar.value = false;
 };
 </script>
 
 <template>
   <van-field
-    v-model="state.value"
+    v-model="result"
     is-link
     readonly
     name="calendar"
     :label="t('calendar')"
     :placeholder="t('placeholder')"
-    @click="state.showCalendar = true"
+    @click="showCalendar = true"
   />
   <van-calendar
-    v-model:show="state.showCalendar"
+    v-model:show="showCalendar"
     round
     teleport="body"
     @confirm="onConfirm"

src/form/demo/FieldTypeDatetimePicker.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 = {
@@ -14,37 +14,30 @@ const i18n = {
 };
 
 const t = useTranslate(i18n);
-const state = reactive({
+const result = ref('');
-  value: '',
+const showPicker = ref(false);
-  showPicker: false,
-});
 
 const onConfirm = (time: string) => {
-  state.value = time;
+  result.value = time;
-  state.showPicker = false;
+  showPicker.value = false;
 };
 
 const onCancel = () => {
-  state.showPicker = false;
+  showPicker.value = false;
 };
 </script>
 
 <template>
   <van-field
-    v-model="state.value"
+    v-model="result"
     is-link
     readonly
     name="datetimePicker"
     :label="t('label')"
     :placeholder="t('placeholder')"
-    @click="state.showPicker = true"
+    @click="showPicker = true"
   />
-  <van-popup
+  <van-popup v-model:show="showPicker" round position="bottom" teleport="body">
-    v-model:show="state.showPicker"
-    round
-    position="bottom"
-    teleport="body"
-  >
     <van-datetime-picker type="time" @confirm="onConfirm" @cancel="onCancel" />
   </van-popup>
 </template>

src/form/demo/FieldTypePicker.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,37 +16,30 @@ const i18n = {
 };
 
 const t = useTranslate(i18n);
-const state = reactive({
+const result = ref('');
-  value: '',
+const showPicker = ref(false);
-  showPicker: false,
-});
 
 const onConfirm = (value: string) => {
-  state.value = value;
+  result.value = value;
-  state.showPicker = false;
+  showPicker.value = false;
 };
 
 const onCancel = () => {
-  state.showPicker = false;
+  showPicker.value = false;
 };
 </script>
 
 <template>
   <van-field
-    v-model="state.value"
+    v-model="result"
     is-link
     readonly
     name="picker"
     :label="t('picker')"
     :placeholder="t('placeholder')"
-    @click="state.showPicker = true"
+    @click="showPicker = true"
   />
-  <van-popup
+  <van-popup v-model:show="showPicker" round position="bottom" teleport="body">
-    v-model:show="state.showPicker"
-    round
-    position="bottom"
-    teleport="body"
-  >
     <van-picker
       :columns="t('textColumns')"
       @confirm="onConfirm"

src/form/demo/ValidateRules.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive } from 'vue';
+import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { FieldValidateError } from '../../field/types';
 import { Toast } from '../../toast';
@@ -32,12 +32,10 @@ const i18n = {
 };
 
 const t = useTranslate(i18n);
-const state = reactive({
+const value1 = ref('');
-  value1: '',
+const value2 = ref('');
-  value2: '',
+const value3 = ref('abc');
-  value3: 'abc',
+const value4 = ref('');
-  value4: '',
-});
 const pattern = /\d{6}/;
 
 const validator = (val: string) => /1\d{10}/.test(val);
@@ -71,28 +69,28 @@ const onFailed = (errorInfo: {
     <van-form @sumbit="onSubmit" @failed="onFailed">
       <van-cell-group inset>
         <van-field
-          v-model="state.value1"
+          v-model="value1"
           name="pattern"
           :label="t('label')"
           :rules="[{ pattern, message: t('message') }]"
           :placeholder="t('pattern')"
         />
         <van-field
-          v-model="state.value2"
+          v-model="value2"
           name="validator"
           :label="t('label')"
           :rules="[{ validator, message: t('message') }]"
           :placeholder="t('validator')"
         />
         <van-field
-          v-model="state.value3"
+          v-model="value3"
           name="validatorMessage"
           :label="t('label')"
           :rules="[{ validator: validatorMessage }]"
           :placeholder="t('validatorMessage')"
         />
         <van-field
-          v-model="state.value4"
+          v-model="value4"
           name="asyncValidator"
           :label="t('label')"
           :rules="[{ validator: asyncValidator, message: t('message') }]"

src/image-preview/demo/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive } from 'vue';
+import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { ImagePreview, ImagePreviewOptions } from '..';
 import { Toast } from '../../toast';
@@ -37,10 +37,8 @@ const images = [
 ];
 
 const t = useTranslate(i18n);
-const state = reactive({
+const show = ref(false);
-  show: false,
+const index = ref(0);
-  index: 0,
-});
 
 const onClose = () => Toast(t('closed'));
 
@@ -52,11 +50,11 @@ const beforeClose = () =>
   });
 
 const showComponentCall = () => {
-  state.show = true;
+  show.value = true;
 };
 
-const onChange = (index: number) => {
+const onChange = (newIndex: number) => {
-  state.index = index;
+  index.value = newIndex;
 };
 
 const showImagePreview = (options: Partial<ImagePreviewOptions> = {}) => {
@@ -102,12 +100,8 @@ const showImagePreview = (options: Partial<ImagePreviewOptions> = {}) => {
     <van-cell is-link @click="showComponentCall">
       {{ t('componentCall') }}
     </van-cell>
-    <van-image-preview
+    <van-image-preview v-model:show="show" :images="images" @change="onChange">
-      v-model:show="state.show"
+      <template #index>{{ t('index', index) }}</template>
-      :images="images"
-      @change="onChange"
-    >
-      <template #index>{{ t('index', state.index) }}</template>
     </van-image-preview>
   </demo-block>
 </template>

src/share-sheet/demo/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, reactive } from 'vue';
+import { ref, computed } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { ShareSheetOption, ShareSheetOptions } from '..';
 import { Toast } from '../../toast';
@@ -42,12 +42,10 @@ const i18n = {
 };
 
 const t = useTranslate(i18n);
-const show = reactive({
+const showBasic = ref(false);
-  basic: false,
+const showWithDesc = ref(false);
-  withDesc: false,
+const showMultiLine = ref(false);
-  multiLine: false,
+const showCustomIcon = ref(false);
-  customIcon: false,
-});
 
 const options = computed(() => [
   { name: t('wechat'), icon: 'wechat' },
@@ -101,18 +99,18 @@ const optionsWithDesc = computed<ShareSheetOptions>(() => [
 
 const onSelect = (option: ShareSheetOption) => {
   Toast(option.name);
-  show.basic = false;
+  showBasic.value = false;
-  show.withDesc = false;
+  showWithDesc.value = false;
-  show.multiLine = false;
+  showMultiLine.value = false;
-  show.customIcon = false;
+  showCustomIcon.value = false;
 };
 </script>
 
 <template>
   <demo-block card :title="t('basicUsage')">
-    <van-cell is-link :title="t('showSheet')" @click="show.basic = true" />
+    <van-cell is-link :title="t('showSheet')" @click="showBasic = true" />
     <van-share-sheet
-      v-model:show="show.basic"
+      v-model:show="showBasic"
       :title="t('title')"
       :options="options"
       @select="onSelect"
@@ -120,9 +118,9 @@ const onSelect = (option: ShareSheetOption) => {
   </demo-block>
 
   <demo-block card :title="t('multiLine')">
-    <van-cell is-link :title="t('showSheet')" @click="show.multiLine = true" />
+    <van-cell is-link :title="t('showSheet')" @click="showMultiLine = true" />
     <van-share-sheet
-      v-model:show="show.multiLine"
+      v-model:show="showMultiLine"
       :title="t('title')"
       :options="multiLineOptions"
       @select="onSelect"
@@ -130,18 +128,18 @@ const onSelect = (option: ShareSheetOption) => {
   </demo-block>
 
   <demo-block card :title="t('customIcon')">
-    <van-cell is-link :title="t('showSheet')" @click="show.customIcon = true" />
+    <van-cell is-link :title="t('showSheet')" @click="showCustomIcon = true" />
     <van-share-sheet
-      v-model:show="show.customIcon"
+      v-model:show="showCustomIcon"
       :options="customIconOptions"
       @select="onSelect"
     />
   </demo-block>
 
   <demo-block card :title="t('withDesc')">
-    <van-cell is-link :title="t('showSheet')" @click="show.withDesc = true" />
+    <van-cell is-link :title="t('showSheet')" @click="showWithDesc = true" />
     <van-share-sheet
-      v-model:show="show.withDesc"
+      v-model:show="showWithDesc"
       :title="t('title')"
       :options="optionsWithDesc"
       :description="t('description')"