[Improvement] Sku: improve render performance (#550)

packages/sku/components/SkuActions.vue

@@ -1,7 +1,17 @@
 <template>
   <div class="van-sku-actions">
-    <van-button v-if="showAddCartBtn" bottom-action @click="onAddCartClicked">{{ $t('cart') }}</van-button>
-    <van-button type="primary" bottom-action @click="onBuyClicked">{{ buyText || $t('buy') }}</van-button>
+    <van-button
+      v-if="showAddCartBtn"
+      bottom-action
+      :text="$t('cart')"
+      @click="skuEventBus.$emit('sku:addCart')"
+    />
+    <van-button
+      type="primary"
+      bottom-action
+      :text="buyText || $t('buy')"
+      @click="skuEventBus.$emit('sku:buy')"
+    />
   </div>
 </template>
 
@@ -20,15 +30,6 @@ export default create({
     buyText: String,
     skuEventBus: Object,
     showAddCartBtn: Boolean
-  },
-
-  methods: {
-    onAddCartClicked() {
-      this.skuEventBus.$emit('sku:addCart');
-    },
-    onBuyClicked() {
-      this.skuEventBus.$emit('sku:buy');
-    }
   }
 });
 </script>

packages/sku/components/SkuHeader.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="van-sku-header van-hairline--bottom">
     <div class="van-sku-header__img-wrap">
-      <img class="van-sku__goods-img" :src="goodsImg">
+      <img class="van-sku__goods-img" :src="goodsImg" >
     </div>
     <div class="van-sku-header__goods-info">
       <div class="van-sku__goods-name">{{ goods.title }}</div>
       <div class="van-sku__goods-price"><span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ price }}</span></div>
-      <span class="van-sku__close-icon" @click="onCloseClicked" />
+      <span class="van-sku__close-icon" @click="skuEventBus.$emit('sku:close')" />
     </div>
   </div>
 </template>
@@ -26,9 +26,6 @@ export default create({
   },
 
   computed: {
-    skuTree() {
-      return this.sku.tree;
-    },
     goodsImg() {
       const s1Id = this.selectedSku.s1;
       const skuImg = this.getSkuImg(s1Id);
@@ -45,14 +42,11 @@ export default create({
   },
 
   methods: {
-    onCloseClicked() {
-      this.skuEventBus.$emit('sku:close');
-    },
     getSkuImg(id) {
       if (!id) return;
 
       // 目前skuImg都挂载在skuTree中s1那类sku上
-      const treeItem = this.skuTree.filter(treeItem => treeItem.k_s === 's1')[0] || {};
+      const treeItem = this.sku.tree.filter(treeItem => treeItem.k_s === 's1')[0] || {};
 
       if (!treeItem.v) {
         return;

packages/sku/components/SkuMessages.vue

@@ -1,26 +1,14 @@
 <template>
   <cell-group class="van-sku-messages">
-    <template v-for="(message, index) in internalMessages">
-      <template v-if="message.type === 'image'" />
-      <field
-        v-else-if="message.multiple == '1'"
-        :key="`${goodsId}-${index}`"
-        :required="message.required == '1'"
-        :label="message.name"
-        :placeholder="getPlaceholder('textarea')"
-        type="textarea"
-        v-model="messageValues[index]"
-      />
-      <field
-        v-else
-        :key="`${goodsId}-${index}`"
-        :required="message.required == '1'"
-        :label="message.name"
-        :placeholder="getPlaceholder(message.type)"
-        :type="getType(message)"
-        v-model="messageValues[index]"
-      />
-    </template>
+    <field
+      v-for="(message, index) in internalMessages"
+      v-model="messageValues[index]"
+      :key="`${goodsId}-${index}`"
+      :required="message.required == '1'"
+      :label="message.name"
+      :placeholder="getPlaceholder(message)"
+      :type="getType(message)"
+    />
   </cell-group>
 </template>
 
@@ -47,26 +35,23 @@ export default create({
 
   computed: {
     internalMessages() {
-      if (Object.prototype.toString.call(this.messages) === '[object Array]') {
-        return this.messages;
-      }
-      return [];
+      return Array.isArray(this.messages) ? this.messages.filter(message => message.type !== 'image') : [];
     },
 
     messageValues() {
-      const messageValues = [];
-      this.internalMessages.forEach((message, index) => {
-        messageValues[index] = '';
-      });
-
-      return messageValues;
+      return this.internalMessages.map(() => '');
     }
   },
 
   methods: {
-    getType({ type, datetime }) {
-      if (type === 'id_no') return 'text';
-      return datetime > 0 ? 'datetime-local' : type;
+    getType(message) {
+      if (+message.multiple === 1) {
+        return 'textarea';
+      }
+      if (message.type === 'id_no') {
+        return 'text';
+      }
+      return message.datetime > 0 ? 'datetime-local' : message.type;
     },
 
     getMessages() {
@@ -96,8 +81,9 @@ export default create({
       return messages;
     },
 
-    getPlaceholder(key) {
-      return this.messagePlaceholderMap[key] || this.$t(`placeholder.${key}`);
+    getPlaceholder(message) {
+      const type = +message.multiple === 1 ? 'textarea' : message.type;
+      return this.messagePlaceholderMap[type] || this.$t(`placeholder.${type}`);
     },
 
     validateMessages() {

packages/sku/components/SkuRowItem.vue

@@ -1,12 +1,14 @@
 <template>
   <span
-    v-if="isChoosable"
-    @click="onSkuSelected"
     class="van-sku-row__item"
-    :class="{ 'van-sku-row__item--active': isChoosed }">
+    :class="{
+      'van-sku-row__item--active': isChoosed,
+      'van-sku-row__item--disabled': !isChoosable
+    }"
+    @click="onSkuSelected"
+  >
     {{ skuValue.name }}
   </span>
-  <span v-else class="van-sku-row__item van-sku-row__item--disabled">{{ skuValue.name }}</span>
 </template>
 
 <script>
@@ -25,6 +27,7 @@ export default {
     isChoosed() {
       return this.skuValue.id === this.selectedSku[this.skuKeyStr];
     },
+
     isChoosable() {
       const matchedSku = Object.assign({}, this.selectedSku, {
         [this.skuKeyStr]: this.skuValue.id
@@ -44,7 +47,12 @@ export default {
 
   methods: {
     onSkuSelected() {
-      this.skuEventBus.$emit('sku:select', Object.assign({}, this.skuValue, { skuKeyStr: this.skuKeyStr }));
+      if (this.isChoosable) {
+        this.skuEventBus.$emit('sku:select', {
+          ...this.skuValue,
+          skuKeyStr: this.skuKeyStr
+        });
+      }
     }
   }
 };

packages/sku/components/SkuStepper.vue

@@ -8,7 +8,7 @@
         :min="1"
         :max="stepperLimit"
         :disable-input="disableStepperInput"
-        @overlimit="handleOverLimit"
+        @overlimit="onOverLimit"
       />
     </div>
     <div v-if="!hideStock" class="van-sku__stock">{{ $t('remain', stock) }}</div>
@@ -39,14 +39,8 @@ export default create({
     stepperTitle: String,
     quota: Number,
     quotaUsed: Number,
-    hideStock: {
-      type: Boolean,
-      default: false
-    },
-    disableStepperInput: {
-      type: Boolean,
-      default: false
-    }
+    hideStock: Boolean,
+    disableStepperInput: Boolean
   },
 
   data() {
@@ -96,7 +90,8 @@ export default create({
     setCurrentNum(num) {
       this.currentNum = num;
     },
-    handleOverLimit(action) {
+
+    onOverLimit(action) {
       this.skuEventBus.$emit('sku:overLimit', {
         action,
         limitType: this.limitType,