diff --git a/packages/area/index.ts b/packages/area/index.ts
index 8d0e24bd..5503fdc6 100644
--- a/packages/area/index.ts
+++ b/packages/area/index.ts
@@ -7,7 +7,7 @@ type AreaItem = {
   code: string;
 };
 
-const COLUMNSPLACEHOLDERCODE = '000000';
+const EMPTY_CODE = '000000';
 
 VantComponent({
   classes: ['active-class', 'toolbar-class', 'column-class'],
@@ -29,11 +29,6 @@ VantComponent({
     columnsNum: {
       type: null,
       value: 3,
-      observer(value: number) {
-        this.setData({
-          displayColumns: this.data.columns.slice(0, +value),
-        });
-      },
     },
     columnsPlaceholder: {
       type: Array,
@@ -51,7 +46,6 @@ VantComponent({
 
   data: {
     columns: [{ values: [] }, { values: [] }, { values: [] }],
-    displayColumns: [{ values: [] }, { values: [] }, { values: [] }],
     typeToColumnsPlaceholder: {},
   },
 
@@ -76,7 +70,7 @@ VantComponent({
     onConfirm(event: WechatMiniprogram.CustomEvent) {
       const { index } = event.detail;
       let { value } = event.detail;
-      value = this.parseOutputValues(value);
+      value = this.parseValues(value);
       this.emit('confirm', { value, index });
     },
 
@@ -86,18 +80,21 @@ VantComponent({
       this.$emit(type, detail);
     },
 
-    // parse output columns data
-    parseOutputValues(values) {
+    parseValues(values: AreaItem[]) {
       const { columnsPlaceholder } = this.data;
-      return values.map((value, index) => {
-        // save undefined value
-        if (!value) return value;
 
-        value = JSON.parse(JSON.stringify(value));
-        if (!value.code || value.name === columnsPlaceholder[index]) {
-          value.code = '';
-          value.name = '';
+      return values.map((value, index) => {
+        if (
+          value &&
+          (!value.code || value.name === columnsPlaceholder[index])
+        ) {
+          return {
+            ...value,
+            code: '',
+            name: '',
+          };
         }
+
         return value;
       });
     },
@@ -108,7 +105,7 @@ VantComponent({
       this.setValues().then(() => {
         this.$emit('change', {
           picker,
-          values: this.parseOutputValues(picker.getValues()),
+          values: this.parseValues(picker.getValues()),
           index,
         });
       });
@@ -120,14 +117,13 @@ VantComponent({
     },
 
     getList(type: string, code?: string): AreaItem[] {
-      const { typeToColumnsPlaceholder } = this.data;
-      let result: { code: string; name: string }[] = [];
       if (type !== 'province' && !code) {
-        return result;
+        return [];
       }
 
-      const list = this.getConfig(type);
-      result = Object.keys(list).map((code) => ({
+      const { typeToColumnsPlaceholder } = this.data;
+      const list: Record<string, string> = this.getConfig(type);
+      let result = Object.keys(list).map((code) => ({
         code,
         name: list[code],
       }));
@@ -149,8 +145,9 @@ VantComponent({
           type === 'province'
             ? ''
             : type === 'city'
-            ? COLUMNSPLACEHOLDERCODE.slice(2, 4)
-            : COLUMNSPLACEHOLDERCODE.slice(4, 6);
+            ? EMPTY_CODE.slice(2, 4)
+            : EMPTY_CODE.slice(4, 6);
+
         result.unshift({
           code: `${code}${codeFill}`,
           name: typeToColumnsPlaceholder[type],
@@ -180,42 +177,30 @@ VantComponent({
     },
 
     setValues() {
-      const county = this.getConfig('county');
-      let { code } = this;
-
-      if (!code) {
-        if (this.data.columnsPlaceholder.length) {
-          code = COLUMNSPLACEHOLDERCODE;
-        } else if (Object.keys(county)[0]) {
-          code = Object.keys(county)[0];
-        } else {
-          code = '';
-        }
-      }
-
-      const province = this.getList('province');
-      const city = this.getList('city', code.slice(0, 2));
-
       const picker = this.getPicker();
 
       if (!picker) {
         return;
       }
 
+      let code = this.code || this.getDefaultCode();
+      const provinceList = this.getList('province');
+      const cityList = this.getList('city', code.slice(0, 2));
+
       const stack: Promise<void>[] = [];
       const indexes: number[] = [];
       const { columnsNum } = this.data;
 
       if (columnsNum >= 1) {
-        stack.push(picker.setColumnValues(0, province, false));
+        stack.push(picker.setColumnValues(0, provinceList, false));
         indexes.push(this.getIndex('province', code));
       }
 
       if (columnsNum >= 2) {
-        stack.push(picker.setColumnValues(1, city, false));
+        stack.push(picker.setColumnValues(1, cityList, false));
         indexes.push(this.getIndex('city', code));
-        if (city.length && code.slice(2, 4) === '00') {
-          [{ code }] = city;
+        if (cityList.length && code.slice(2, 4) === '00') {
+          [{ code }] = cityList;
         }
       }
 
@@ -236,9 +221,34 @@ VantComponent({
         .catch(() => {});
     },
 
+    getDefaultCode() {
+      const { columnsPlaceholder } = this.data;
+
+      if (columnsPlaceholder.length) {
+        return EMPTY_CODE;
+      }
+
+      const countyCodes = Object.keys(this.getConfig('county'));
+      if (countyCodes[0]) {
+        return countyCodes[0];
+      }
+
+      const cityCodes = Object.keys(this.getConfig('city'));
+      if (cityCodes[0]) {
+        return cityCodes[0];
+      }
+
+      return '';
+    },
+
     getValues() {
       const picker = this.getPicker();
-      return picker ? picker.getValues().filter((value) => !!value) : [];
+
+      if (!picker) {
+        return [];
+      }
+
+      return this.parseValues(picker.getValues().filter((value) => !!value));
     },
 
     getDetail() {
diff --git a/packages/area/index.wxml b/packages/area/index.wxml
index 60757941..f7dc51f5 100644
--- a/packages/area/index.wxml
+++ b/packages/area/index.wxml
@@ -1,3 +1,5 @@
+<wxs src="./index.wxs" module="computed" />
+
 <van-picker
   class="van-area__picker"
   active-class="active-class"
@@ -7,7 +9,7 @@
   value-key="name"
   title="{{ title }}"
   loading="{{ loading }}"
-  columns="{{ displayColumns }}"
+  columns="{{ computed.displayColumns(columns, columnsNum) }}"
   item-height="{{ itemHeight }}"
   visible-item-count="{{ visibleItemCount }}"
   cancel-button-text="{{ cancelButtonText }}"
diff --git a/packages/area/index.wxs b/packages/area/index.wxs
new file mode 100644
index 00000000..07723c11
--- /dev/null
+++ b/packages/area/index.wxs
@@ -0,0 +1,8 @@
+/* eslint-disable */
+function displayColumns(columns, columnsNum) {
+  return columns.slice(0, +columnsNum);
+}
+
+module.exports = {
+  displayColumns: displayColumns,
+};