docs: prefer using ref (#9285)

* docs: prefer using ref

* docs: fix lint error

src/field/README.md

@@ -46,28 +46,26 @@ Use `type` prop to custom different type fields.
 
 ```html
 <van-cell-group inset>
-  <van-field v-model="state.text" label="Text" />
-  <van-field v-model="state.tel" type="tel" label="Phone" />
-  <van-field v-model="state.digit" type="digit" label="Digit" />
-  <van-field v-model="state.number" type="number" label="Number" />
-  <van-field v-model="state.password" type="password" label="Password" />
+  <van-field v-model="text" label="Text" />
+  <van-field v-model="tel" type="tel" label="Phone" />
+  <van-field v-model="digit" type="digit" label="Digit" />
+  <van-field v-model="number" type="number" label="Number" />
+  <van-field v-model="password" type="password" label="Password" />
 </van-cell-group>
 ```
 
 ```js
-import { reactive } from 'vue';
+import { ref } from 'vue';
 
 export default {
   setup() {
-    const state = reactive({
-      tel: '',
-      text: '',
-      digit: '',
-      number: '',
-      password: '',
-    });
+    const tel = ref('');
+    const text = ref('');
+    const digit = ref('');
+    const number = ref('');
+    const password = ref('');
 
-    return { state };
+    return { tel, text, digit, number, password };
   },
 };
 ```
@@ -86,14 +84,14 @@ export default {
 ```html
 <van-cell-group inset>
   <van-field
-    v-model="state.value1"
+    v-model="value1"
     label="Text"
     left-icon="smile-o"
     right-icon="warning-o"
     placeholder="Show Icon"
   />
   <van-field
-    v-model="state.value2"
+    v-model="value2"
     clearable
     label="Text"
     left-icon="music-o"
@@ -103,16 +101,16 @@ export default {
 ```
 
 ```js
-import { reactive } from 'vue';
+import { ref } from 'vue';
 
 export default {
   setup() {
-    const state = reactive({
-      value1: '',
-      value2: '123',
-    });
-
-    return { state };
+    const value1 = ref('');
+    const value2 = ref('123');
+    return {
+      value1,
+      value2,
+    };
   },
 };
 ```
@@ -161,13 +159,13 @@ Use `formatter` prop to format the input value.
 ```html
 <van-cell-group inset>
   <van-field
-    v-model="state.value1"
+    v-model="value1"
     label="Text"
     :formatter="formatter"
     placeholder="Format On Change"
   />
   <van-field
-    v-model="state.value2"
+    v-model="value2"
     label="Text"
     :formatter="formatter"
     format-trigger="onBlur"
@@ -177,18 +175,17 @@ Use `formatter` prop to format the input value.
 ```
 
 ```js
-import { reactive } from 'vue';
+import { ref } from 'vue';
 
 export default {
   setup() {
-    const state = reactive({
-      value1: '',
-      value2: '',
-    });
+    const value1 = ref('');
+    const value2 = ref('');
     const formatter = (value) => value.replace(/\d/g, '');
 
     return {
-      state,
+      value1,
+      value2,
       formatter,
     };
   },

src/field/README.zh-CN.md

@@ -48,32 +48,30 @@ export default {
 ```html
 <van-cell-group inset>
   <!-- 输入任意文本 -->
-  <van-field v-model="state.text" label="文本" />
+  <van-field v-model="text" label="文本" />
   <!-- 输入手机号，调起手机号键盘 -->
-  <van-field v-model="state.tel" type="tel" label="手机号" />
+  <van-field v-model="tel" type="tel" label="手机号" />
   <!-- 允许输入正整数，调起纯数字键盘 -->
-  <van-field v-model="state.digit" type="digit" label="整数" />
+  <van-field v-model="digit" type="digit" label="整数" />
   <!-- 允许输入数字，调起带符号的纯数字键盘 -->
-  <van-field v-model="state.number" type="number" label="数字" />
+  <van-field v-model="number" type="number" label="数字" />
   <!-- 输入密码 -->
-  <van-field v-model="state.password" type="password" label="密码" />
+  <van-field v-model="password" type="password" label="密码" />
 </van-cell-group>
 ```
 
 ```js
-import { reactive } from 'vue';
+import { ref } from 'vue';
 
 export default {
   setup() {
-    const state = reactive({
-      tel: '',
-      text: '',
-      digit: '',
-      number: '',
-      password: '',
-    });
+    const tel = ref('');
+    const text = ref('');
+    const digit = ref('');
+    const number = ref('');
+    const password = ref('');
 
-    return { state };
+    return { tel, text, digit, number, password };
   },
 };
 ```
@@ -96,14 +94,14 @@ export default {
 ```html
 <van-cell-group inset>
   <van-field
-    v-model="state.value1"
+    v-model="value1"
     label="文本"
     left-icon="smile-o"
     right-icon="warning-o"
     placeholder="显示图标"
   />
   <van-field
-    v-model="state.value2"
+    v-model="value2"
     clearable
     label="文本"
     left-icon="music-o"
@@ -113,16 +111,16 @@ export default {
 ```
 
 ```js
-import { reactive } from 'vue';
+import { ref } from 'vue';
 
 export default {
   setup() {
-    const state = reactive({
-      value1: '',
-      value2: '123',
-    });
-
-    return { state };
+    const value1 = ref('');
+    const value2 = ref('123');
+    return {
+      value1,
+      value2,
+    };
   },
 };
 ```
@@ -177,13 +175,13 @@ export default {
 ```html
 <van-cell-group inset>
   <van-field
-    v-model="state.value1"
+    v-model="value1"
     label="文本"
     :formatter="formatter"
     placeholder="在输入时执行格式化"
   />
   <van-field
-    v-model="state.value2"
+    v-model="value2"
     label="文本"
     :formatter="formatter"
     format-trigger="onBlur"
@@ -193,19 +191,18 @@ export default {
 ```
 
 ```js
-import { reactive } from 'vue';
+import { ref } from 'vue';
 
 export default {
   setup() {
-    const state = reactive({
-      value1: '',
-      value2: '',
-    });
+    const value1 = ref('');
+    const value2 = ref('');
     // 过滤输入的数字
     const formatter = (value) => value.replace(/\d/g, '');
 
     return {
-      state,
+      value1,
+      value2,
       formatter,
     };
   },