diff --git a/packages/coupon-list/test/__snapshots__/index.spec.js.snap b/packages/coupon-list/test/__snapshots__/index.spec.js.snap
index 1e196ab66..392554260 100644
--- a/packages/coupon-list/test/__snapshots__/index.spec.js.snap
+++ b/packages/coupon-list/test/__snapshots__/index.spec.js.snap
@@ -116,12 +116,8 @@ exports[`render coupon list 1`] = `
             </div>
           </div>
         </div>
-        <!---->
-      </div>
-      <div class="van-tab__pane" style="display: none;">
-        <!---->
-        <!---->
       </div>
+      <div class="van-tab__pane" style="display: none;"></div>
     </div>
   </div><button class="van-button van-button--default van-button--large van-coupon-list__close"><span class="van-button__text">不使用优惠</span></button>
 </div>
diff --git a/packages/list/test/__snapshots__/demo.spec.js.snap b/packages/list/test/__snapshots__/demo.spec.js.snap
index 4489ae329..2f4f26bcb 100644
--- a/packages/list/test/__snapshots__/demo.spec.js.snap
+++ b/packages/list/test/__snapshots__/demo.spec.js.snap
@@ -9,14 +9,8 @@ exports[`renders demo correctly 1`] = `
       </div>
     </div>
     <div class="van-tabs__content">
-      <div class="van-tab__pane" style="display:none;">
-        <!---->
-        <!---->
-      </div>
-      <div class="van-tab__pane" style="display:none;">
-        <!---->
-        <!---->
-      </div>
+      <div class="van-tab__pane" style="display:none;"></div>
+      <div class="van-tab__pane" style="display:none;"></div>
     </div>
   </div>
 </div>
diff --git a/packages/tab/index.vue b/packages/tab/index.js
similarity index 67%
rename from packages/tab/index.vue
rename to packages/tab/index.js
index 40234a810..f912a2be1 100644
--- a/packages/tab/index.vue
+++ b/packages/tab/index.js
@@ -1,26 +1,10 @@
-<template>
-  <div
-    v-show="isSelected || parent.animated"
-    :class="b('pane')"
-  >
-    <slot v-if="inited" />
-    <div
-      v-if="$slots.title"
-      ref="title"
-    >
-      <slot name="title" />
-    </div>
-  </div>
-</template>
-
-<script>
 /* eslint-disable object-shorthand */
-import create from '../utils/create';
+import { use } from '../utils';
 import findParent from '../mixins/find-parent';
 
-export default create({
-  name: 'tab',
+const [sfc, bem] = use('tab');
 
+export default sfc({
   mixins: [findParent],
 
   props: {
@@ -39,14 +23,14 @@ export default create({
       return this.parent.tabs.indexOf(this);
     },
 
-    isSelected() {
+    selected() {
       return this.index === this.parent.curActive;
     }
   },
 
   watch: {
     'parent.curActive'() {
-      this.inited = this.inited || this.isSelected;
+      this.inited = this.inited || this.selected;
     },
 
     title() {
@@ -70,6 +54,15 @@ export default create({
 
   beforeDestroy() {
     this.parent.tabs.splice(this.index, 1);
+  },
+
+  render(h) {
+    const slots = this.$slots;
+    return (
+      <div v-show={this.selected || this.parent.animated} class={bem('pane')}>
+        {this.inited && slots.default}
+        {slots.title && <div ref="title">{slots.title}</div>}
+      </div>
+    );
   }
 });
-</script>
diff --git a/packages/tab/test/__snapshots__/demo.spec.js.snap b/packages/tab/test/__snapshots__/demo.spec.js.snap
index 84a2ef401..c575e3e1f 100644
--- a/packages/tab/test/__snapshots__/demo.spec.js.snap
+++ b/packages/tab/test/__snapshots__/demo.spec.js.snap
@@ -10,22 +10,10 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-          <!---->
-        </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-          <!---->
-        </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-          <!---->
-        </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-          <!---->
-        </div>
+        <div class="van-tab__pane" style="display:none;"></div>
+        <div class="van-tab__pane" style="display:none;"></div>
+        <div class="van-tab__pane" style="display:none;"></div>
+        <div class="van-tab__pane" style="display:none;"></div>
       </div>
     </div>
   </div>
@@ -37,38 +25,14 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-          <!---->
-        </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-          <!---->
-        </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-          <!---->
-        </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-          <!---->
-        </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-          <!---->
-        </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-          <!---->
-        </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-          <!---->
-        </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-          <!---->
-        </div>
+        <div class="van-tab__pane" style="display:none;"></div>
+        <div class="van-tab__pane" style="display:none;"></div>
+        <div class="van-tab__pane" style="display:none;"></div>
+        <div class="van-tab__pane" style="display:none;"></div>
+        <div class="van-tab__pane" style="display:none;"></div>
+        <div class="van-tab__pane" style="display:none;"></div>
+        <div class="van-tab__pane" style="display:none;"></div>
+        <div class="van-tab__pane" style="display:none;"></div>
       </div>
     </div>
   </div>
@@ -80,18 +44,9 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-          <!---->
-        </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-          <!---->
-        </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-          <!---->
-        </div>
+        <div class="van-tab__pane" style="display:none;"></div>
+        <div class="van-tab__pane" style="display:none;"></div>
+        <div class="van-tab__pane" style="display:none;"></div>
       </div>
     </div>
   </div>
@@ -103,19 +58,38 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-          <!---->
+        <div class="van-tab__pane" style="display:none;"></div>
+        <div class="van-tab__pane" style="display:none;"></div>
+        <div class="van-tab__pane" style="display:none;"></div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-tabs van-tabs--line">
+      <div class="van-tabs__wrap van-hairline--top-bottom">
+        <div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
+          <div class="van-tabs__line" style="background-color:undefined;"></div>
         </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-          <!---->
-        </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-          <!---->
+      </div>
+      <div class="van-tabs__content">
+        <div class="van-tab__pane" style="display:none;"></div>
+        <div class="van-tab__pane" style="display:none;"></div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-tabs van-tabs--line">
+      <div class="van-tabs__wrap van-hairline--top-bottom">
+        <div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
+          <div class="van-tabs__line" style="background-color:undefined;"></div>
         </div>
       </div>
+      <div class="van-tabs__content">
+        <div class="van-tab__pane" style="display:none;"></div>
+        <div class="van-tab__pane" style="display:none;"></div>
+        <div class="van-tab__pane" style="display:none;"></div>
+        <div class="van-tab__pane" style="display:none;"></div>
+      </div>
     </div>
   </div>
   <div>
@@ -127,53 +101,6 @@ exports[`renders demo correctly 1`] = `
       </div>
       <div class="van-tabs__content">
         <div class="van-tab__pane" style="display:none;">
-          <!---->
-          <!---->
-        </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-          <!---->
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-tabs van-tabs--line">
-      <div class="van-tabs__wrap van-hairline--top-bottom">
-        <div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
-          <div class="van-tabs__line" style="background-color:undefined;"></div>
-        </div>
-      </div>
-      <div class="van-tabs__content">
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-          <!---->
-        </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-          <!---->
-        </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-          <!---->
-        </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-          <!---->
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div class="van-tabs van-tabs--line">
-      <div class="van-tabs__wrap van-hairline--top-bottom">
-        <div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
-          <div class="van-tabs__line" style="background-color:undefined;"></div>
-        </div>
-      </div>
-      <div class="van-tabs__content">
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
           <div>
             <div><i class="van-icon van-icon-more-o" style="color:undefined;font-size:undefined;">
                 <!----></i>标签
@@ -181,7 +108,6 @@ exports[`renders demo correctly 1`] = `
           </div>
         </div>
         <div class="van-tab__pane" style="display:none;">
-          <!---->
           <div>
             <div><i class="van-icon van-icon-more-o" style="color:undefined;font-size:undefined;">
                 <!----></i>标签
@@ -200,22 +126,10 @@ exports[`renders demo correctly 1`] = `
       </div>
       <div class="van-tabs__content van-tabs__content--animated">
         <div class="van-tabs__track" style="left:0%;transition-duration:0.3s;">
-          <div class="van-tab__pane">
-            <!---->
-            <!---->
-          </div>
-          <div class="van-tab__pane">
-            <!---->
-            <!---->
-          </div>
-          <div class="van-tab__pane">
-            <!---->
-            <!---->
-          </div>
-          <div class="van-tab__pane">
-            <!---->
-            <!---->
-          </div>
+          <div class="van-tab__pane"></div>
+          <div class="van-tab__pane"></div>
+          <div class="van-tab__pane"></div>
+          <div class="van-tab__pane"></div>
         </div>
       </div>
     </div>
@@ -228,22 +142,10 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-          <!---->
-        </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-          <!---->
-        </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-          <!---->
-        </div>
-        <div class="van-tab__pane" style="display:none;">
-          <!---->
-          <!---->
-        </div>
+        <div class="van-tab__pane" style="display:none;"></div>
+        <div class="van-tab__pane" style="display:none;"></div>
+        <div class="van-tab__pane" style="display:none;"></div>
+        <div class="van-tab__pane" style="display:none;"></div>
       </div>
     </div>
   </div>
diff --git a/packages/tab/test/__snapshots__/index.spec.js.snap b/packages/tab/test/__snapshots__/index.spec.js.snap
index 8afa45551..7e97f0339 100644
--- a/packages/tab/test/__snapshots__/index.spec.js.snap
+++ b/packages/tab/test/__snapshots__/index.spec.js.snap
@@ -8,18 +8,11 @@ exports[`change tabs data 1`] = `
     </div>
   </div>
   <div class="van-tabs__content">
+    <div class="van-tab__pane" style="display: none;"></div>
     <div class="van-tab__pane" style="display: none;">
-      <!---->
-      <!---->
-    </div>
-    <div class="van-tab__pane" style="display: none;">
-      <!---->
       <div><span>title2</span></div>
     </div>
-    <div class="van-tab__pane" style="display: none;">
-      <!---->
-      <!---->
-    </div>
+    <div class="van-tab__pane" style="display: none;"></div>
   </div>
 </div>
 `;
@@ -37,16 +30,9 @@ exports[`change tabs data 2`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tab__pane" style="">Text
-      <!---->
-    </div>
-    <div class="van-tab__pane" style="display: none;">
-      <!---->
-    </div>
-    <div class="van-tab__pane" style="display: none;">
-      <!---->
-      <!---->
-    </div>
+    <div class="van-tab__pane" style="">Text</div>
+    <div class="van-tab__pane" style="display: none;"></div>
+    <div class="van-tab__pane" style="display: none;"></div>
   </div>
 </div>
 `;
@@ -64,16 +50,9 @@ exports[`click to switch tab 1`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tab__pane" style="">Text
-      <!---->
-    </div>
-    <div class="van-tab__pane" style="display: none;">
-      <!---->
-    </div>
-    <div class="van-tab__pane" style="display: none;">
-      <!---->
-      <!---->
-    </div>
+    <div class="van-tab__pane" style="">Text</div>
+    <div class="van-tab__pane" style="display: none;"></div>
+    <div class="van-tab__pane" style="display: none;"></div>
   </div>
 </div>
 `;
@@ -91,16 +70,9 @@ exports[`click to switch tab 2`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tab__pane" style="display: none;">Text
-      <!---->
-    </div>
-    <div class="van-tab__pane" style="">
-      Text
-    </div>
-    <div class="van-tab__pane" style="display: none;">
-      <!---->
-      <!---->
-    </div>
+    <div class="van-tab__pane" style="display: none;">Text</div>
+    <div class="van-tab__pane" style=""></div>
+    <div class="van-tab__pane" style="display: none;"></div>
   </div>
 </div>
 `;
@@ -118,16 +90,9 @@ exports[`swipe to switch tab 1`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tab__pane" style="">Text
-      <!---->
-    </div>
-    <div class="van-tab__pane" style="display: none;">
-      <!---->
-    </div>
-    <div class="van-tab__pane" style="display: none;">
-      <!---->
-      <!---->
-    </div>
+    <div class="van-tab__pane" style="">Text</div>
+    <div class="van-tab__pane" style="display: none;"></div>
+    <div class="van-tab__pane" style="display: none;"></div>
   </div>
 </div>
 `;
@@ -145,16 +110,9 @@ exports[`swipe to switch tab 2`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tab__pane" style="display: none;">Text
-      <!---->
-    </div>
-    <div class="van-tab__pane" style="">
-      Text
-    </div>
-    <div class="van-tab__pane" style="display: none;">
-      <!---->
-      <!---->
-    </div>
+    <div class="van-tab__pane" style="display: none;">Text</div>
+    <div class="van-tab__pane" style=""></div>
+    <div class="van-tab__pane" style="display: none;"></div>
   </div>
 </div>
 `;
@@ -172,16 +130,9 @@ exports[`swipe to switch tab 3`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tab__pane" style="display: none;">Text
-      <!---->
-    </div>
-    <div class="van-tab__pane" style="">
-      Text
-    </div>
-    <div class="van-tab__pane" style="display: none;">
-      <!---->
-      <!---->
-    </div>
+    <div class="van-tab__pane" style="display: none;">Text</div>
+    <div class="van-tab__pane" style=""></div>
+    <div class="van-tab__pane" style="display: none;"></div>
   </div>
 </div>
 `;
@@ -199,16 +150,9 @@ exports[`swipe to switch tab 4`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tab__pane" style="">Text
-      <!---->
-    </div>
-    <div class="van-tab__pane" style="display: none;">
-      Text
-    </div>
-    <div class="van-tab__pane" style="display: none;">
-      <!---->
-      <!---->
-    </div>
+    <div class="van-tab__pane" style="">Text</div>
+    <div class="van-tab__pane" style="display: none;"></div>
+    <div class="van-tab__pane" style="display: none;"></div>
   </div>
 </div>
 `;